Expand last child to the bottom of parent

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).

score 3 · Answer 1 · answered Apr 25 '16 at 18:54

3

Make the parent a flex box with display:flex; and the flex--direction being column. Next give the last child element the flex:1; property to make it expand to the remainder of the space in the parent.

#parent {
   min-height: 500px;
  display:flex;
  flex-direction: column;
  
}
#last-child{
  flex:1;
  background:blue;
}
.child{
  background:red;  
}

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

answered Apr 25 '16 at 18:54

Wowsk

3,637
2
18
29

I wish i could give second right answer. Thank you too. – MaruniakS Apr 25 '16 at 20:02
You could vote up also... – Wowsk Apr 26 '16 at 00:31
I voted up, but I have just registered. – MaruniakS Apr 26 '16 at 07:38

score 3 · Accepted Answer · answered Apr 25 '16 at 18:54

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>

Expand last child to the bottom of parent

2 Answers2