使弹性容器的宽度随其子元素增长

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容器的宽度不会随着其子元素而增长以及如何修复吗？

- Alexander Abakumov

---

@LGSon：一切看起来都很棒，已经接受了。非常感谢！ - Alexander Abakumov

Answer 1

块级元素会根据其父元素的宽度而增长，而行内元素则随内容而增长。

这里可以找到更详细的解释：

• 如何让背景色延伸到溢出区域

---

将元素改为inline-flex后，即可得到预期结果。

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

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

- Asons

---

这个链接似乎可以正常工作，但我不明白它与本文的相关性，而且它的标题也并非与链接所示相同。 - Oliver Joseph Ash

@OliverJosephAsh 啊，现在我明白了，当被点击时它会完全更改URL。谢谢，我会将其标记为待审核并看看他们会说些什么。 - Asons

@OliverJosephAsh 有人更改了那个旧问题的标题。我现在更新了链接到其中一个回答，该回答讨论了块元素的背景颜色，这对于溢出的子块元素具有类似的效果，因此它的描述对于我的这个答案也是有价值的。 - Asons

值得注意的是，如果您希望容器永远不会缩小到其父级大小以下（即当其子元素较小时），您需要使用 min-width: 100%。或者，您可以将内联显示和 min-width 替换为新的 min-width: min-content。http://jsbin.com/xumeqik/2/edit?html,css,output - Oliver Joseph Ash