flexible child filling flexible container - html

Question

I have a problem with auto shrinking(in width) children in a flexible container box. When page shrinks, i want .c1 and .c2 shrink so their container .a2 shrinks and floats near .a1 not moves under it.
.con
{
background-color:red;
max-width:500px;
}
.a
{
background-color:yellow;
width:100px;
height:100px;
float:left;
display:inline-block;
}
.a2
{
background-color:grey;
overflow:auto;
max-width:400px;
width:100%;
}
.c
{
background-color:blue;
float:left;
height:60px;
width:50%;
overflow:auto;
}
.c2
{
background-color:black;
}
<div class="con">
<div class="a a1">aaa</div>
<div class="a a2">
<div class="c c1"></div>
<div class="c c2"></div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>

Answer 1

The following styles affect your .a2 element:
.a {
float: left;
display: inline-block; /* Useless! Floats are blocks */
}
.a2 {
width: 100%;
}
Just unset those and it will work:
.a2 {
display: block; /* Default value for <div> */
width: auto; /* Initial value */
float: none; /* Initial value */
}
.con {
background-color: red;
max-width: 500px;
}
.a {
background-color: yellow;
width: 100px;
height: 100px;
float: left;
display: inline-block;
}
.a2 {
display: block;
width: auto;
float: none;
background-color: grey;
overflow: auto;
max-width: 400px;
}
.c {
background-color: blue;
float: left;
height: 60px;
width: 50%;
overflow: auto;
}
.c2 {
background-color: black;
}
<div class="con">
<div class="a a1">aaa</div>
<div class="a a2">
<div class="c c1"></div>
<div class="c c2"></div>
</div>
<div style="clear:both"></div>
</div>
Alternatively, instead of unsetting, consider not setting them in the first place.
.con {
background-color: red;
max-width: 500px;
}
.a {
height: 100px;
}
.a1 {
background-color: yellow;
width: 100px;
float: left;
}
.a2 {
background-color: grey;
overflow: auto;
max-width: 400px;
}
.c {
background-color: blue;
float: left;
height: 60px;
width: 50%;
overflow: auto;
}
.c2 {
background-color: black;
}
<div class="con">
<div class="a a1">aaa</div>
<div class="a a2">
<div class="c c1"></div>
<div class="c c2"></div>
</div>
<div style="clear:both"></div>
</div>