Stretch Child Div Height to Fill Parent That Has Dynamic Height

Stretch child div height to fill parent that has dynamic height

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>

How to stretch child div vertically to fill up parent div when parent div height is dynamic

Flexbox can do that.

.container {  background-color: lightgray;  display: flex;  border: 1px solid red;  width: 80%;  margin: 1em auto;}
.blurb { flex: 1; padding: 2em;}
.decoration { display: flex; align-items: center; background-color: white; margin-right: 1em;}
<div class="container">  <div class="blurb">    Lorem ipsum...  </div>  <div class="decoration">    ✓  </div></div>
<div class="container"> <div class="blurb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae accusantium, magni commodi repellendus quidem facilis doloremque perspiciatis, ab odio omnis deleniti, obcaecati maiores dolores? </div> <div class="decoration"> ✓ </div></div>

Div cover parent div with min-height

flexbox may help.

Add these code to the .wrapper:

display: flex;
align-items: stretch;

Remove height and add width to the child.

.wrapper {
background-color: grey;
min-height: 50vh;
display: flex;
align-items: stretch;
}

.child {
width: 100%;
background-color: blue;
color: white;
}
<div class="wrapper">
<div class="child">
Foo Bar!
</div>
</div>

How can I expand floated child div's height to parent's height?

For the parent element, add the following properties:

.parent {
overflow: hidden;
position: relative;
width: 100%;
}

then for .child-right these:

.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}

Find more detailed results with CSS examples here and more information about equal height columns here.

How to extend height of an element to the bottom of its parent element

You can do this easily with CSS Grid

.parent {  background: #232323;  height: 500px;  display: grid;  grid-template-rows: auto 1fr;}
h1 { color: white}
.child { padding: 50px; border: 3px solid red;}
 <div class="parent">  <h1>*Some other content*</h1>
<div class="child"> <h1>*The content of the child element*</h1> </div></div>

How to stretch flex child to fill height of the container?

When using Flexbox, the major mistake is to start using height: 100% all over.

We are used to that in many cases, though when it comes to Flexbox, it often breaks it instead.

The solution is simple, just remove the height: 100%, and it will work automatically.

The reason it does, is for flex item in row direction (the default), the align-items control the vertical behavior, and as its default is stretch this just work as is.

Stack snippet

<div style='display: flex'>
<div style='background-color: yellow; width: 20px'>
</div>
<div style='background-color: blue'>
some<br> cool<br> text
</div>
</div>

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721


I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

Make div (height) occupy parent remaining height

Expanding the #down child to fill the remaining space of #container can be accomplished in various ways depending on the browser support you wish to achieve and whether or not #up has a defined height.

Samples

.container {  width: 100px;  height: 300px;  border: 1px solid red;  float: left;}.up {  background: green;}.down {  background: pink;}.grid.container {  display: grid;  grid-template-rows: 100px;}.flexbox.container {  display: flex;  flex-direction: column;}.flexbox.container .down {  flex-grow: 1;}.calc .up {  height: 100px;}.calc .down {  height: calc(100% - 100px);}.overflow.container {  overflow: hidden;}.overflow .down {  height: 100%;}
<div class="grid container">  <div class="up">grid    <br />grid    <br />grid    <br />  </div>  <div class="down">grid    <br />grid    <br />grid    <br />  </div></div><div class="flexbox container">  <div class="up">flexbox    <br />flexbox    <br />flexbox    <br />  </div>  <div class="down">flexbox    <br />flexbox    <br />flexbox    <br />  </div></div><div class="calc container">  <div class="up">calc    <br />calc    <br />calc    <br />  </div>  <div class="down">calc    <br />calc    <br />calc    <br />  </div></div><div class="overflow container">  <div class="up">overflow    <br />overflow    <br />overflow    <br />  </div>  <div class="down">overflow    <br />overflow    <br />overflow    <br />  </div></div>

Make div fill height of parent with dynamic sibling

Use flexbox with flex-direction column and a set min-height on your main, then allow the second child to grow and not the first