CSS height 100% in automatic brother div not working in Chrome - html

Question

Can't fixed it...
I have a div with 2 divs inside. The first one determinates height and the second one takes that height. But chrome don't want to do it.
<div style="display: table; height: 100%; width: 100%; min-height: 100%;">
<div FIRST-DIV-HEIGHT-VARIABLE WITH FLOAT LEFT></div>
<div style="box-sizing: border-box; display: table; float: right;
height: auto; min-height: 100%; padding: 0 20px 81px; position: relative;
width: 280px; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
-webkit-box-sizing: border-box; -khtml-box-sizing: border-box;
-o-box-sizing: border-box;"></div>
</div>

Answer 1

Flexboxes are the easiest way to create columns of equal height:
<style>
.container {
display: flex;
display: -mx-flexbox; // IE10
display: -webkit-flex; // Safari
flex-grow: 0;
-ms-flex-grow: 0; // IE10
-webkit-flex-grow: 0; // Safari
}
.left, .right { width: 50%; }
.left {
background-color: #c66;
height: 200px;
}
.right { background-color: #66c; }
</style>
<div class="container">
<div class="left">
<p>This is the left DIV.</p>
</div>
<div class="right">
<p>This is the right DIV.</p>
<p>Its height is equal to the left DIV.</p>
</div>
</div>
Flexboxes do not work in IE9 and older. Suresh idea above works in older browsers, but there is a mistake in the code (table cells don't float) and inline CSS is better avoided:
<style>
.container { display: table; }
.row { display: table-row; }
.left, .right {
display: table-cell;
width: 50%;
}
.left {
background-color: #c66;
height: 200px;
}
.right { background-color: #66c; }
</style>
<div class="container">
<div class="row">
<div class="left">
<p>This is the left DIV.</p>
</div>
<div class="right">
<p>This is the right DIV.</p>
<p>Its height is equal to the left DIV.</p>
</div>
</div>
</div>

Answer 2

Add display:table-cell property for your child div. So that automatically adjust the height of sibling divs.
<div style="display:table; width:100%; height:100%; border:1px solid #f000ff;">
<div style="height:400px; display:table-cell; background-color:#ff000f;">My Main Content</div>
<div style="display:table-cell; float:right; height:100%; background-color:#ff00ff;">My Sample Content</div>
</div>
Check the Working JSFIDDLE HERE
In the above fiddle I have assigned the first child div height as 400px. If you modify this height, the right side div automatically adjust its height. Check it out and let me know if any issues.