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

Question

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

在我的测试中，我在页脚中添加了3个div，其中一个（第3个）具有较大的宽度内容。这些div正在变得奇怪地调整大小......第3个正在拍摄第1和第2个宽度，使得内容被破坏，请参阅：

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

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

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

Obs：欢迎提及此消息的英文提示。 = d

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

Answer 1

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

您可以使用flex速记来解决此问题 - 特别是，您可能希望制作前两个弹性项目flex: none，以防止它们完全弯曲（尤其是收缩低于其固有宽度）。但是，您可能做希望第三个项目能够缩小（低于其单行文本的宽度），以便人们可能仍希望保留默认的flex: 0 1 auto。 / p>

使用添加到flex CSS的固定（footer-column属性和第三列的内联样式规则）：http://jsfiddle.net/R3zCk/

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

Answer 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>