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

Question

这是简化的布局：

<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容器宽度不会随着孩子的增长而增长吗？

Answer 1

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

这里可以找到一个更好，更深入的解释：

• Make background color extend into overflow area

更改为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;