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>

Working Fiddle

Solution 2

Use display: flex to stretch your divs:

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

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 };
Share:
163,272

Related videos on Youtube

Khaled
Author by

Khaled

Updated on August 15, 2020

Comments

  • Khaled
    Khaled over 3 years

    As it can be seen in the following fiddle, I have two divs, contained in a parent div that have stretched to contain the big div, my goal is to make those child divs equal in height.

    http://fiddle.jshell.net/y9bM4/

  • SharpC
    SharpC over 7 years
    Although once the browser window is resized this will break, whereas the CSS ones will still work.
  • Mark Stewart
    Mark Stewart over 5 years
    Did you test your answer using the original poster's same code?
  • ShortFuse
    ShortFuse about 5 years
    It 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 use display: -ms-grid to avoid some flexbugs, as long you only have one child.
  • BadHorsie
    BadHorsie about 5 years
    I needed to add the stretch on the children for flex to work for me.
  • Falcon
    Falcon almost 3 years
    That's works for me, but for display: grid which is inside stretched element, I have to add height: 100% parameter. The grid contains dynamic height by default also.

Related