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.

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.

• javascript
• jquery
• html
• css
• flexbox

• 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. stackoverflow./q/52487743/3597276 – Michael Benjamin Commented Apr 4, 2019 at 19:39
• stackoverflow./questions/40020921/… – kukkuz Commented Apr 5, 2019 at 1:11
• @Michael_B I know, I know.. but maybe there is some way to acplish 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 Commented Apr 5, 2019 at 19:07
• @kukkuz Not what I'm looking for – George Commented Apr 5, 2019 at 19:08
• 1 @George, include that info in your question, and add the JS / jQuery tags. – Michael Benjamin Commented Apr 5, 2019 at 19:27

1 Answer 1

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>