How to make a flexbox element fill the remaining space and scroll?

Question

I'm trying to have a vertical scrollable div in the remaining space of some elements. None of them have a fixed height.

All I got is a flexbox element that adjusts to its content, but what I really need is that the element fill up the empty space and it's content just scroll there.

Code at Fiddle

HTML

<div class="wrapper-1">
  <div>some stuff</div>
  <div>some other stuff</div>
</div>
<div class="wrapper-2">
  <div>more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more stuff</div>
</div>
<div class="wrapper-3">
  <div id="header">
      <div>My</div>
      <div>Header than can grow</div>
  </div>
  <div id="content">
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
  </div>
</div>

CSS

html, body {
    margin: 0;
    height: 100%;
}

.wrapper-1 {
  background: white;
}

.wrapper-2 {
  background: lime;
}

.wrapper-3 {
  display: flex;
  flex-direction: column;
}

#header {
  background: #edc;
  flex: 1 1 40px;
}

#content {
    flex: 1 1 auto;
    background: yellow;
    overflow: auto;
}

#content div {
  min-height: 50px;
}

The #content should have the height from the #header to the bottom of the page.

The perfect solution would be using only CSS but an alternative JS solution could help, the thing is that this have to work even when resizing the browser window.

Without a fixed height limitation, `overflow` cannot work (it has no limit to overflow). You'll need a fixed height somewhere along the line, even if it's just `1px`. https://stackoverflow.com/q/52487743/3597276 — Michael Benjamin, Apr 04 '19 at 19:39
https://stackoverflow.com/questions/40020921/flexbox-fill-available-space-vertically/40021077#40021077 — kukkuz, Apr 05 '19 at 01:11
@Michael_B I know, I know.. but maybe there is some way to accomplish that, maybe using JS, I would like to have everything in CSS but, if there is an option in JS that do the trick even when resizing the browser window, that could help. — George, Apr 05 '19 at 19:07
@George, include that info in your question, and add the JS / jQuery tags. — Michael Benjamin, Apr 05 '19 at 19:27

score 1 · Answer 1 · edited Mar 07 '23 at 14:34

Check out the solution in the following fiddle, just make sure to resize the window bigger so that the scroll bar can appear. Solution at this fiddle, Click Here

The header would still fit its size even if its size grown bigger, no need to specify its size, the content div would fill the remaining space.

HTML, CSS

html, body {
    margin: 0;
    height: 100%;
}

.all-wrapper{
  height: 100%;
  display:flex;
  flex-direction:column;
}
.wrapper-1 {
  background: white;
}

.wrapper-2 {
  background: lime;
}

.wrapper-3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow:hidden;
}

#header {
  background: #edc;
}

#content {
    flex: 1;
    background: yellow;
    overflow: auto;
}

#content div {
  min-height: 50px;
}

<div class="all-wrapper">
<div class="wrapper-1">
  <div>some stuff</div>
  <div>some other stuff</div>
</div>
<div class="wrapper-2">
  <div>more and more and more and more and more and more more stuff</div>
</div>
<div class="wrapper-3">
  <div id="header">
      <div>My</div>
      <div>Header than can grow</div>
  </div>
  <div id="content">
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
  </div>
</div>
</div>

How to make a flexbox element fill the remaining space and scroll?

1 Answers1