Expand last child to the bottom of parent [duplicate]

Question

I have one div-container and children inside it.

<div id="parent">
    <div class="child"></div>
    <div class="child"></div> 
    <div class="child"></div>
    <div class="child" id="last-child"></div>      
</div>

I don't know height of children (every time different content), but i have

#parent {
   min-height: 500px;
}

I want to stretch last-child to the bottom of parent (it has to fill free space from his subling to parent bottom).

Answer 1

You can use flexbox for this (background colors added for visibility):

#parent {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  background: #999;
}
.child {
  background: #eee;
}
#last-child {
  flex-grow: 1;
  background: #faa;
}

<div id="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child" id="last-child">4</div>
</div>