'How do I make content fill a page with a scrollable list inside, where only that list is scrollable?

I'm looking to make some content scrollable inside a set of containers similar to the image I have provided.

Here is what I have tried so far.

section {
  position: absolute;
  bottom: 0;
  top: 0;
  display: flex;
  flex-flow: column;
}

header {
  background: tomato;
}

p {
  background: lightgreen;
}

div {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: auto;

}

ul {
  flex-grow: 1;
  background: gold;

}

footer {
  background: lightblue;
  min-height: 60px;
}
   <section>
          <header>
            Fixed Header
            <br />
          </header>
          <div>
            <p>
              Fixed Inner HEader
            </p>
            <ul>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
              <li>Fill</li>
            </ul>
          </div>
        
          <footer>
            Fixed Footer
          </footer>
        </section>

As you can see it doesn't quite work because the fixed inner header is scrolling with the content. I've tried putting the overflow:auto on the ul item only but it causes the content to go beyond the boundaries of the page. Any ideas?

Test Image

htmlcss


Solution 1:[1]

Too much CSS, simplify. This should be close to what you're looking for

section {
  background-color
}

h1 {
  background: tomato;
  margin: 0 auto;
}

h3 {
  background: lightgreen;
  margin: 0 auto;
}

div.outer {
  padding: 10px;
  background-color: yellow;
}

div.scrollable {
  height: 300px;
  max-height: 100%;
  overflow-y: auto;
}

ul {
  margin: 0;
  background-color: white;
}

footer {
  background: lightblue;
  min-height: 60px;
}
<section>
  <header>
    <h1>Fixed Header</h1>
  </header>
  <div class="outer">
    <h3>
      Fixed Inner Header
    </h3>
    <div class="scrollable">
      <ul>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
        <li>Fill</li>
      </ul>
    </div>
  </div>
  <footer>
    Fixed Footer
  </footer>
</section>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 fnostro

Related Questions