Two divs in a parent div not taking 100% height

Question

I have two divs inside a parent div both have height set to 100%,

<div style="min-height:40px; border:solid 1px black; float:left; ;">
    <div style="border:solid 1px black; height:auto;  float:left;clear; width:49%;">
         First to set height
            First to set height    First to set height
            First to set height    
    </div>

    <div style="border:solid 1px red;float:left; width:49%;height: 100% ;">
           Why don't get the 100%
    </div>
</div>

Don't understand why the second div not taking it's parent div height . Here is the jsFiddle

Answer 1

If you want a table-like experience for the div positioning, it would be better to use :

display:table-cell on the 2 div's and display:table-row on the parent div instead of the floats.

Here's an updated fiddle : fiddle

Answer 2

check out the same fiddle with contents inside the second div here.I just added

<div style="border:solid 1px red;float:left; width:49%;height: 100% ;">
    First to set height
            First to set height    First to set height
            First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height
        First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height
    </div>

hope that helps.

Answer 3

Having a div 100% height child inside an unknown height parent has always been a mystery when not using a table or in this case flexbox, and has led some developers to other creative hacks and answers like this.

As an alternative to tables you could try using flexbox, though it is not full supported across older browsers so you may honestly want to go with tables. (see here for browser support.)

Here is a flexbox example. Taken from http://philipwalton.github.io/solved-by-flexbox/demos/grids/

HTML

<div class="Grid Grid--gutters Grid--flexCells">
    <div class="Grid-cell">
      <div class="Demo">
        Full-height, even when my content doesn't fill the space.
      </div>
    </div>

    <div class="Grid-cell">
      <div class="Demo">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.
      </div>
    </div>
  </div>

CSS

.Grid--gutters {
margin-left: -1em;
}

.Grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.Grid--gutters>.Grid-cell {
padding-left: 1em;
}

.Grid--flexCells>.Grid-cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.Grid-cell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.Demo {
    width: 100%;
    padding: .8em 1em 0;
    padding-bottom: 1em;
    margin-bottom: 1em;
    background: rgba(147,128,108,.1);
    border-radius: 3px;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

http://jsfiddle.net/5SHfq/9/