Flex Container Vertical Overflowing Parent Div

I´m currently trying to create yome kind of layout with fixed header and footer and an dynamic content area, which should use the remaining vertical space. The content-wrapper has

Solution 1:

Just apply:

div.content-wrapper {
  flex: 1;
  overflow: auto;
}

Explanation:

• flex: 1 it takes up all remaining space available.
• overflow: auto; it triggers the scrollbar when needed.

There is no needs to apply anything on div.content for creating such layout, it can be removed too. See the simplified as follows:

div.main-wrapper {
  height: 200px;
  display: flex;
  flex-direction: column;
}

div.content-wrapper {
  flex: 1;
  overflow: auto;
  background: lightblue;
}

div.header,
div.footer {
  height: 50px;
  background: lightgreen;
}

<divclass="main-wrapper"><divclass="header">FIXED HEADER</div><divclass="content-wrapper">
      DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
  </div><divclass="footer">FIXED FOOTER</div></div>

Solution 2:

If you are going to incorporate further columning within your content. I strongly reccomend you use css grid for this. It will allow for much more control and flexibility.

As per the specification.

CSS Grid defines a two-dimensional grid-based layout system.

Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.

---

Example

grid-template-rows: 50px 100px 50px;

You can use the fr unit to a fraction of the available space. This is similar to auto.

You can even use minmax(100px, 1fr); to set the upper and lower limits of the height.

div.main-wrapper {
  width: 100%;
  display: grid;
  grid-template-rows: 50px100px50px;
  background: grey;
}

.content {
  padding: 10px;
  background-color: red;
  overflow-y: auto;
}

.header,
.footer {
  background-color: green;
}

<divclass="main-wrapper"><divclass="header">FIXED HEADER</div><divclass="content">
    DYNAMIC CONTENT
    <br/>DYNAMIC CONTENT
    <br/>DYNAMIC CONTENT
    <br/>DYNAMIC CONTENT
    <br/>DYNAMIC CONTENT
    <br/>DYNAMIC CONTENT
    <br/>DYNAMIC CONTENT
    <br/>DYNAMIC CONTENT
  </div><divclass="footer">FIXED FOOTER</div></div>