溢出不会使 flexbox 容器的子级调整大小答案

【问题标题】：Overflow doesn't make flexbox container's children to resize溢出不会使 flexbox 容器的子级调整大小
【发布时间】：2014-03-22 06:51:41
【问题描述】：

我的布局中有一个带有display: flex; position: absolute; height: auto; width: 100%; align-items: flex-start; justify-content: space-around; 的页脚。在它里面有一个未定义数量的 div，它们会根据它的内容调整大小。

在我的测试中，我在页脚中放置了 3 个 div，其中一个（第三个）具有大宽度的内容。这些 div 正在奇怪地调整大小......第 3 个占据了第 1 和第 2 的宽度，这使得它们的内容被破坏了，请参阅：

overflow: auto; 无法按预期工作，因为只是添加了水平滚动。

我该如何解决这个问题？为什么 3rd div 优先调整大小以适应其内容？

还有一件事：如您所见，第一个红色 div 有一个列表作为内容。奇怪的是只有它的第一个项目有一个标记。我没有为此应用 CSS 并将 display: none;（可能是空间不足的问题）添加到第二个和第三个 div 并不能解决它。什么什么？

Obs：也欢迎引用此消息的英文提示。 =D

在这里查看所有这些内容：http://jsfiddle.net/T5YSe/

【问题讨论】：

你能发布一个显示整个代码的小提琴吗？
我在问题帖中添加了小提琴。

标签： css overflow flexbox

【解决方案1】：

由于默认的flex-shrink: 1 值，所有三个弹性项目都在缩小（当没有足够的空间来容纳它们的集体首选宽度时）。

您可以使用flex 简写来解决此问题——特别是，您可能希望将前两个弹性项目设置为flex: none，以防止它们完全弯曲（尤其是收缩到它们的固有属性以下）宽度）。但是，您可能确实希望第三个项目能够缩小（低于其单行文本的宽度），因此您可能希望仍保留默认的 flex: 0 1 auto。

修复这个问题（flex 属性添加到 footer-column CSS 和第三列的内联样式规则）：http://jsfiddle.net/R3zCk/

（我没有费心在上面的小提琴中添加我的“flex”速记的前缀版本；如果你愿意，你可以这样做。）

【讨论】：

非常感谢。这几乎解决了问题。我会看看我能做些什么来在正确的divs 中使用这个解决方案，因为我无法预见哪一个会有大宽度的文本作为内容。
为flex: none 获得 +1。

【解决方案2】：

参考 dholbert 的回答来解决 flexbox 的问题。

至于您的列表显示不正确，那是因为它使用了向后的标签。应该这样写：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>

【讨论】：

Ops，我是怎么让它被忽视的？非常感谢。