Адаптируемый по высоте скроллируемый список

Question

Есть пример, описывающий скроллируемый flex список с фиксированным заголовком http://jsfiddle.net/ch7n6/867/

Если перед списком добавить какой-то контент, то список смещается вниз на высоту добавленного контента с сохранением своей высоты. Как нужно поправить стили списка, чтобы список нижней границей остался на нижней границе страницы?

Модифицированный html примера:

Top content<br>Top content<br>Top content<br>
<section id="container" >
    <header id="header" >This is a header</header>
    <article id="content" >
        This is the content that<br />With a lot of lines.
        <br />With a lot of lines. <br />This is the content that
        <br />With a lot of lines.<br />This is the content that
        <br /> With a lot of lines.<br />This is the content that
        <br /> With a lot of lines.
        This is the content that<br />With a lot of lines.
        <br />With a lot of lines. <br />This is the content that
        <br />With a lot of lines.<br />This is the content that
        <br /> With a lot of lines.<br />This is the content that
        <br /> With a lot of lines.
        This is the content that<br />With a lot of lines.
        <br />With a lot of lines. <br />This is the content that
        <br />With a lot of lines.<br />This is the content that
        <br /> With a lot of lines.<br />This is the content that
        <br /> With a lot of lines.
    </article>
    <footer id="footer" >This is a footer</footer>
</section>

Answer 1

так?

/* just for visual */

.wrapper {
  border: 1px solid coral;
}

textarea {
  height: 6em;
}

#container {
  background-color: wheat;
}


/* simulate height limitations  */

html,
body {
  height: 100%;
}

.place {
  height: 75%;
}


/* needed */

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wrapper section {
  overflow: auto;
}

<div class="place">
  <div class="wrapper">
    Top content<br>Top content<br>Top content<br>
    <textarea>More top content - resize this textarea to see changes in list height</textarea>
    <section id="container">
      <header id="header">This is a header</header>
      <article id="content">
        This is the content that<br />With a lot of lines.
        <br />With a lot of lines. <br />This is the content that
        <br />With a lot of lines.<br />This is the content that
        <br /> With a lot of lines.<br />This is the content that
        <br /> With a lot of lines. This is the content that<br />With a lot of lines.
        <br />With a lot of lines. <br />This is the content that
        <br />With a lot of lines.<br />This is the content that
        <br /> With a lot of lines.<br />This is the content that
        <br /> With a lot of lines. This is the content that<br />With a lot of lines.
        <br />With a lot of lines. <br />This is the content that
        <br />With a lot of lines.<br />This is the content that
        <br /> With a lot of lines.<br />This is the content that
        <br /> With a lot of lines.
      </article>
      <footer id="footer">This is a footer</footer>
    </section>
    <div>
    </div>

БЛОГ НА HUSL

Адаптируемый по высоте скроллируемый список

Ответы (1 шт):