Prevent "flex-grow: 1" item from growing if it's content is bigger

Question

I am working on a layout that consists markup and styling below (live demo https://codepen.io/IljaDaderko/pen/MWwLgVr) It all works well I have my header and footer with fixed heights and content area auto expanding to fill rest of the space.

Inside content area I have a div that fills up all it's parent space and adds overflow-x: scroll. My initial assumption was that if I add a bunch of Content <br /> inside of it I would still see my footer and be able to scroll down, however it keeps expanding content area (see live demo #2 https://codepen.io/IljaDaderko/pen/MWwLgBQ).

Is it possible to keep that footer at the bottom (without making it fixed), while making content area auto expand and utalising scroll container? Reason to keep scroll container is that it will be reusable component in a framework I use.

CSS

.container {
  width: 100vw;
  height: 100vh;
  background: pink;
  display: flex;
  flex-direction: column;
}

.header {
  background: magenta;
  height: 50px;
}

.content {
  flex-grow: 1;
}

.footer {
  background: lightgreen;
  height: 30px;
}

.scroll {
  height: 100%;
  width: 100%;
  overflow-x: scroll;
}

HTML

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="scroll">
      Content
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

`min-height: 0;` to content and replace min-height:100vh with height:100vh — Temani Afif, Mar 29 '20 at 12:35
Can you explain why `min-height: 0` on content has this effect please? It worked, but I have no idea why. @TemaniAfif — Ilja, Mar 29 '20 at 12:39

score 0 · Accepted Answer · answered Mar 29 '20 at 12:48

You are doing great, just need a slight change to your css.

Make these changes:

Remove overflow property from scroll class
Add overflow: scroll to content class

In code:

.content {
  flex-grow: 1;
  overflow: scroll;
}

.scroll {
  height: 100%;
  width: 100%;
}

You should get scrolling content now no matter how much you add to scroll div.

Prevent "flex-grow: 1" item from growing if it's content is bigger

1 Answers1