DIV fill remaining height when the DIV above changes its height dynamically

Question

Is there a CSS solution for having a DIV (D2) filling the remaining parent element height when the DIV above (D1) dynamically changes its size?

|-------------------|    |-------------------|    |-------------------|
| some content   D1 |    | some content   D1 |    | some content   D1 |
| +                 |    | more content      |    | more content      |
|-------------------|    | +                 |    | even more         |
|                D2 |    |-------------------|    | +                 |
|                   |    |                D2 |    |-------------------|
|                   |    |                   |    |                D2 |
|                   |    |                   |    |                   |
|                   |    |                   |    |                   |
|                   |    |                   |    |                   |
|-------------------|    |-------------------|    |-------------------|

D1 also has a max-height and overflow: scroll.

In this jsFiddle make the yellow (d2) fill the rest, whatever the dynamic content of d1 is, without using javascript.

I have seen several question but none treat a dynamic height changing of the upper DIV (D1)

I can not use a Javascript solution. TABLEs are also fine instead of DIVs.

shyammakwana.me · Answer 1 · 2015-11-18T10:22:29.977

Check updated answer below.

make structure like this

 div class=main  {
     div class=d1 {
          something 
          more stuff
          even more stuff
          }
     div class=d2{
            something
           }

}

css :

div main { 
      width 200 px; for example
      }
d1, d2 { 
      width 100%,
      and float:left
      }

now by doing this when d1 changes d2 automatically goes down, don't give height to any DIV

Update : Using Flexbox property

.main {
  width: 500px;
  height: 160px;
  background: grey;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}
.d1 {
  background: lime;
}
.d2 {
  background: yellow;
  height: 100%;
}
.d1,
.d2 {
  width: 100%;
}

<div class="main">
  <div class="d1">
    d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1
  </div>
  <div class="d2">
    d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2
  </div>
</div>

Now how much content is in D1 doesn't matter, D2 will take full height of main div.

This does not work since `d2` does not fill **the rest of the parent** http://jsfiddle.net/XumuF/ — Gabriel Petrovay, Jul 25 '13 at 10:45
check this [http://jsfiddle.net/Nuwyn/](http://jsfiddle.net/Nuwyn/), is this what you want ? — shyammakwana.me, Jul 25 '13 at 11:04
@shyammakwana.me Your fiddle does not do the job either. See http://jsfiddle.net/u5x8w7ym/ to see that `d2` overflows the bottom of `main`. — Old Pro, Nov 17 '15 at 22:44

score 0 · Answer 2 · answered Mar 06 '21 at 20:11

I prefer more descriptive class names...

.container {
    display: flex;
    flex-direction: column;
    font: 20px Verdana;
    height: 88vh;
    background: grey;
    padding: 5px;
}
.upper{
    flex: 1 1; /* grow shrink */
    background: lime;
}
.lower{
    flex: 1 1; /* grow shrink */
    background: yellow;
    overflow-y: auto;
}

https://jsfiddle.net/spencerw/zLcwq42s/52/

DIV fill remaining height when the DIV above changes its height dynamically

2 Answers2

Update : Using Flexbox property