Stretch child div height to fill parent that has dynamic height
163,272
Solution 1
The solution is to use display: table-cell
to bring those elements inline instead of using display: inline-block
or float: left
.
div#container {
padding: 20px;
background: #F1F1F1
}
.content {
width: 150px;
background: #ddd;
padding: 10px;
display: table-cell;
vertical-align: top;
}
.text {
font-family: 12px Tahoma, Geneva, sans-serif;
color: #555;
}
<div id="container">
<div class="content">
<h1>Title 1</h1>
<div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
<br>Sample Text. Sample Text. Sample Text.
<br>Sample Text.
<br>
</div>
</div>
<div class="content">
<h1>Title 2</h1>
<div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
</div>
</div>
Solution 2
Use display: flex
to stretch your div
s:
div#container {
padding:20px;
background:#F1F1F1;
display: flex;
}
.content {
width:150px;
background:#ddd;
padding:10px;
margin-left: 10px;
}
Solution 3
Add the following CSS:
For the parent div:
style="display: flex;"
For child div:
style="align-items: stretch;"
Solution 4
https://www.youtube.com/watch?v=jV8B24rSN5o
I think you can use display as grid:
.parent { display: grid };
Related videos on Youtube
Author by
Khaled
Updated on August 15, 2020Comments
-
Khaled over 3 years
As it can be seen in the following fiddle, I have two
div
s, contained in a parentdiv
that have stretched to contain the big div, my goal is to make those childdiv
s equal in height. -
SharpC over 7 yearsAlthough once the browser window is resized this will break, whereas the CSS ones will still work.
-
Mark Stewart over 5 yearsDid you test your answer using the original poster's same code?
-
ShortFuse about 5 yearsIt works and doesn't require any CSS on the child. That's because a CSS Grid cell will have
auto
row and cell by default. It actually works pretty nicely with IE if you usedisplay: -ms-grid
to avoid some flexbugs, as long you only have one child. -
BadHorsie about 5 yearsI needed to add the
stretch
on the children for flex to work for me. -
Falcon almost 3 yearsThat's works for me, but for
display: grid
which is inside stretched element, I have to addheight: 100%
parameter. The grid contains dynamic height by default also.