灵活的儿童填充柔性容器

Question

我在弹性容器盒中自动收缩（width）个孩子时遇到问题。当页面缩小时，我希望.c1和.c2缩小，以便它们的容器.a2缩小，并且.a1附近的浮动不会在其下移动。

.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

以下样式会影响您的.a2元素：

.a {
    float: left;
    display: inline-block; /* Useless! Floats are blocks */
}
.a2 {
    width: 100%;
}

只是取消设置，它会起作用：

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

或者，不考虑取消设置，而是考虑不首先设置它们。

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