Div height 100% following two float divs inside

Question

I want to arrange two divs horizontally inside a div. The two divs height flexible, because there is a table in it. A table can be filtered so the height sometime must be changed. I want the outside div can dynamically following two divs inside. I use height 100% for outside div to following the height of two inside divs, but it didn't work because the two inside divs have float:left style.

Answer 1

For your case, I think you need your parent div contains both 2 dynamic size children. You can set the property overflow of the parent to achieve that effect.

.parent{
 overflow:hidden;
}

Answer 2

I think you are asking for clearing floats,

Here is the popular clearfix class. Add this CSS

.clearfix:before,.clearfix:after 
{
  content: "";
  display: table;
}

.clearfix:after 
{
  clear: both;
}

.clearfix 
 {
  zoom: 1; /* ie 6/7 */
 }

and give your parent div the class

class="clearfix" 

I have read about it here.

Answer 3

body{
margin: 0;
}
div{
box-sizing: border-box;
border: 1px solid red;
}
.outer{
width: 80%;
margin: 0 auto;
height: 100vh;
}
.inner{
float: left;
width: 50%;
}

<div class="outer">
<div class="inner">inner 1
<p>Lorem Ipsum is simply dummy text of the printing and t</p>
</div>
<div class="inner">inner 2
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1</p>
</div>
</div>