使flex容器宽度随其子项而增长

时间:2017-10-09 16:03:44

标签: html css css3 flexbox

这是简化的布局:

<div class="root">
  <div class="container">
    <div class="cell">
      <input type="text" class="contact"></input>
    </div>
  </div>
</div>

这是简化的CSS:

.root {
  background-color: red;
  overflow: auto;
  width: 300px;

}

.container {
  background-color: green;
  display: flex;
  height: 50px;
}

.cell {
  background-color: black;
  height: 30px;
}

.contact {
  width: 400px;
}

这是jsFiddle

我有点意外的是,container宽度与其子女所需的宽度不同,而是受root div的限制。您可以在此jsFiddle中看到红色区域(根div)没有填充绿色container div

有人可以解释为什么flex容器宽度不会随着孩子的增长而增长吗?

1 个答案:

答案 0 :(得分:14)

块元素增长到其父宽度,内联随内容增长。

这里可以找到一个更好,更深入的解释:

更改为inline-flex,即可获得预期结果。

&#13;
&#13;
.root {
  background-color: red;
  overflow: auto;
  width: 300px;
  
}

.container {
  background-color: green;
  display: inline-flex;                /*  changed  */
  height: 50px;
}

.cell {
  background-color: black;
  height: 30px;
}

.contact {
  width: 400px;
}
&#13;
<div class="root">
  <div class="container">
    <div class="cell">
      <input type="text" class="contact">
    </div>
  </div>
</div>
&#13;
&#13;
&#13;