css - 溢出不会使 flexbox 容器的子容器调整大小

Question

我在我的布局中有一个页脚，它有 display: flex;position:absolute；高度:自动；宽度:100%；对齐元素: flex 启动；证明内容:周围空间；。它里面有未定义数量的 div，它们会根据它的内容调整大小。

在我的测试中，我在页脚中放置了 3 个 div，其中一个(第 3 个)具有较大宽度的内容。这些 div 的大小调整得很奇怪……第 3 个正在占用第 1 个和第 2 个的宽度，这使得它们的内容被破坏了，请参阅:

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

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

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

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

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

Answer 1

由于它们的默认 flex-shrink: 1 值，所有三个 flex 元素都在收缩(当没有足够的空间来容纳它们的集体首选宽度时)。

您可以使用 flex 简写来解决这个问题——特别是，您可能希望将前两个 flex 元素设置为 flex: none，以防止它们 flex 根本没有(特别是，从缩小到其固有宽度以下)。但是，您可能确实希望第三项能够缩小(低于其单行文本的宽度)，因此您可能希望仍然使用默认的 flex: 0 1自动。

修改那个固定的(flex 属性添加到 footer-column CSS 和第三列的内联样式规则):http://jsfiddle.net/R3zCk/

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