How to Stretch Div Height to Fill Parent Div - CSS

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

Css div fill parent height

With display: flex; flex-direction: column; on the parent, and flex-grow: 1 on the element you want to consume the rest of the available space. You also need to properly close your div elements with </div>

.container {  background-color: green;  height: 200px;  display: flex;  flex-direction: column;}
.item-1 {  background-color: blue;}
.item-2 {  background-color: red;  flex-grow: 1;}

<div class="container">  <div class="item-1">    item 1  </div>  <div class="item-2">    item 2  </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.

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>

CSS - Stretch a child div to the full height of its parent that is overflowed

As i can see, in your case needs to create another class and wraping the container. Copy all styles from the .container to the .wrapper and into the .container set min-height: 100%. Finally to stretch the .layer add bottom: 0.

.body {
  height: 200px;
  overflow-y: auto;
}
/* New class */
.wrapper {
  width: 200px;
  height: 300px;
  overflow-y: auto;
}
.container {
  position: relative;
  width: inherit; /* changed */ 
  min-height: 100%; /* New line */
  /* height: 300px; */
  /* overflow-y: auto; */
}
.layer {
  position: absolute;
  top: 0;
  bottom: 0; /* New line */
  width: inherit;
  /* height: inherit; */
  background: #aaccff99;
}

    <div class="body">
      <div class="wrapper">
        <div class="container">
          <div class="layer"></div>
          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
          of classical Latin literature from 45 BC, making it over 2000 years old. Richard
          McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the
          more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the
          cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum
          comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
          of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of
          ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
          dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum
          used since the 1500s is reproduced below for those interested. Sections 1.10.32 and
          1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact
          original form, accompanied by English versions from the 1914 translation by H. Rackham.
        </div>
      </div>
    </div>

Make div height stretch to parent remaining space and make it scrollable

You almost had it. You need to specify the height of the container so that overflow works (because if its height is not constrained, it will never overflow).

Here's the updated code. In this version, you don't need to hardcode the list's height. It will fill the remaining space and be scrollable, while the headers remain on top. This works by using height: calc(100% - 50px); on the .list and make it overflow: auto. Further you need to make sure the .list-dialog element has height: 100% as well, or else it will just grow and not make the .list overflow.

* {  border-width: 1px;  border-color: #e3e4e8;}
.dialog_wrap {  display: flex;  height: 150px;  overflow: hidden;  width: 500px;  border-style: solid;  border-width: 1px;  border-color: red;}
.dialog_wrap > .dialog_list {  width: 430px;  height: 100%;  border-right-style: solid;}
.dialog_wrap > .dialog_list > .heading {  position: relative;  font-weight: bold;  height: 50px;  border-style: solid;}
.dialog_wrap > .dialog_list > .list {  height: calc(100% - 50px);  overflow-y: auto;}
.dialog_wrap > .dialog_list > .list ul {  padding: 0 !important;  list-style-type: none;}
.dialog_wrap > .dialog_list > .list li > .dialog_instance {  border-bottom-style: solid;  padding: 15px;  display: flex;  margin: 0px !important;}
.dialog_wrap > .details {  width: 100%;  height: 100%;}
.dialog_wrap > .details > .container {  position: relative;  width: inherit;  height: inherit;  padding: 0;}
.dialog_wrap > .details > .container > .heading {  height: 50px;  border-style: solid;}
.dialog_wrap > .details > .container > .body {  overflow-y: auto;  width: 100%;  padding: 5px 5px 5px 5px;}

<div class='dialog_wrap'>  <div class='dialog_list'>    <div class='heading'>      <div>Section A</div>    </div>    <div class='list'>      <ul>        <li>          <div class='dialog_instance'>            <span>A</span>          </div>        </li>        <li>          <div class='dialog_instance'>              <span>B</span>          </div>        </li>        <li>          <div class='dialog_instance'>              <span>C</span>          </div>        </li>        <li>          <div class='dialog_instance'>              <span>D</span>          </div>        </li>      </ul>    </div>  </div>  <div class='details'>    <div class='container'>      <div class='heading'>        Section B      </div>      <div class='body'>      </div>    </div>  </div></div>