How to Fill Remaining Height with a Div

Sometimes things are too obvious but don’t work the way we think.

This is the HTML I have, my requirement is child1 height will be auto(based on the content) and child2 will occupy the remaining height of the main-container.

1
2
3
4
<div class="main-container">
  <div class="child1">Child1 contents</div>
  <div class="child2">Child2 contents</div>
</div>

First I thought this is easy and created the following styles

1
2
3
4
5
6
7
.main-container {
  height: 500px;
  width: 100%;
}
.child2 {
  height: 100%;
}

This produces a wrong result - if child1 takes 100px and I expected child2 to be 400px, but the child2 height is 500px.

Child2 takes full height

Let’s see how to solve this problem.

Using Flexbox

Very easy to solve this using flexbox (display:flex), most of the latest browsers supports it. Make container a Flexbox with the direction set to column, then allow child2 to grow using flex-grow:1. This ensure second child height is automatically adjusted.

1
2
3
4
5
6
7
8
9
.container {
  height: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.container .child2 {
  flex-grow: 1;
}

Here is the result using flexbox

Using table-row

Another option is to use display:table-row. The below code shows how to use it.

1
2
3
4
5
6
7
8
9
10
11
12
.main-container {
  height: 500px;
  width: 100%;
  display: table;
}
.child1 {
  display: table-row;
}
.child2 {
  display: table-row;
  height: 100%;
}

see this in action below