Flex container vertical overflowing parent div

Question

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 a content container which can contain a lot of data, so a scrollbar can appear.

But now to the problem: as you can see, the main wrapper which simulates the page height, should stop at 200px height, but is being stretched by the content container.

I don´t want to use a max-height at the content-wrapper and also can´t use flex-shrink on the content-wrapper because this would screw up the layout by moving the footer inside the content area and let them overlap.

So with this in mind, how can I create a layout with a dynamic content area, which is not spreading vertical to infinity but takes the remaining space of the page and is displaying the provided content inside the content wrapper?

div.main-wrapper {
  height: 200px;
  max-height: 200px;
  min-height: 200px;
  width: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  background: grey;
}

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

div.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}

div.header,
div.footer {
  height: 50px;
  max-height: 50px;
  min-height: 50px;
  background-color: green;
  min-width: 100%;
  width: 100%;
}

<div class="main-wrapper">
  <div class="header">FIXED HEADER</div>
  <div class="content-wrapper">
    <div class="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>
  </div>
  <div class="footer">FIXED FOOTER</div>
</div>

EDIT:
I edited my snippet in order to get more close to my real problem, which I´m trying go simplyfy: As you can see inside the content wrapper, there is another component, let´s treat it as a black box since this layout should work with every div inside the content-wrapper, that takes up 100% height and width. There should not just be added an overflow inside content or content wrapper. The goal is to have the content wrapper container, which takes up the remaining space and limits the containing content-div, which should take up 100% height of the content wrapper and not pushing the height of the main-wrapper. As you can see at the updated snippet the main-wrapper is clearly larger than 200px due to the content area stretching the content-wrapper. So how to fix the problem with the given parameters of not using an overflow property inside content-wrapper and a content blackbox div.

you need to set `flex:1` instead of `flex:1 0 auto` --> you have disabled the shrink effect — Temani Afif, Aug 07 '18 at 14:17
@MathiasRechtzigel If CSS Grid is supported by the latest version of Chrome and Firefox, this will be fine as well. — JohnDizzle, Aug 08 '18 at 05:31

Stickers · Accepted Answer · 2018-08-08T01:53:37.797

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;
}

<div class="main-wrapper">
  <div class="header">FIXED HEADER</div>
  <div class="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>
  <div class="footer">FIXED FOOTER</div>
</div>

This is the simplest and most efficient answer, IMHO. Just adding an explanation for how and why it works: https://stackoverflow.com/q/36247140/3597276 — Michael Benjamin, Aug 07 '18 at 22:40
@JohnDizzle See this example, same as what I suggest but put div.content back in https://codepen.io/anon/pen/ejPqoR — Stickers, Aug 08 '18 at 13:14

DreamTeK · Answer 2 · 2018-08-08T10:20:28.333

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: 50px 100px 50px;
  background: grey;
}

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

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

<div class="main-wrapper">
  <div class="header">FIXED HEADER</div>
  <div class="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>
  <div class="footer">FIXED FOOTER</div>
</div>

edited Aug 08 '18 at 10:20

answered Aug 07 '18 at 14:20

DreamTeK

32,537
27
112
171

is there a way how to set the row height of the middle row to kae up the remaining space of a div minus the other rows? some kind of `grid-template-rows: 50px auto 50px` – JohnDizzle Aug 08 '18 at 05:57
2

@JohnDizzle Yes you can use `grid-template-rows: 50px 1fr 50px`. `auto` will give the middle row the amount of height which it needs but `1fr` gives the remaining space to the middle row. – Armin Ayari Aug 08 '18 at 06:20
1

@JohnDizzle. ArminAyari is correct css grid has a fraction unit. See notes above. – DreamTeK Aug 08 '18 at 07:44
@DreamTeK Could you please adjust the example in the answer, so i could accept it if it works. Thank you in advance – JohnDizzle Aug 08 '18 at 08:07
@JohnDizzle no problem. I assume you mean adjust to fr. – DreamTeK Aug 08 '18 at 09:07

Flex container vertical overflowing parent div

2 Answers2

Example

Linked