嵌套的 flexbox 不包裹在 chrome 或 IE 中

Question

我有一些嵌套的弹性框，我想将它们用于响应式网站，它们在 Firefox 中可以正常工作，但在 chrome 或 IE 中却不行。链接应该能够换行，以便在您缩小屏幕时它们彼此重叠。

链接在此处正确换行：http://jsfiddle.net/6796b/

但是当它们在另一个 flexbox 中时，它们会停止包装并溢出（注意：只有绿色的“链接”没有正确包装/堆叠。其他一切都按预期工作。）：http://jsfiddle.net/3525C/8/

HTML：

<div class="header">
    <div class="logo">logo</div>
    <div class="nav">
        <div class="link">link one</div>
        <div class="link">link two</div>
        <div class="link">link three</div>
    </div>
</div>

CSS：

.header {
    text-align: center;
    display: flex; /* If I take this line out the links wrap properly again, but everything else breaks. */
    flex-flow: row wrap;
}
.logo {
    flex: 1 0 auto;
    min-width: 100px;
    background-color: red;
}
.nav {
    flex: 1 0 auto;
    background-color: lightgray;
    text-align: center;
}
.link {
    display: inline-block;
    background-color: green;
}

Answer 1

您必须应用 flex-shrink 值 1 才能使弹性项目灵活。见edit 9。

默认为：flex: 0 1 auto，它允许弹性项目为“shrink to its min-size when there is insufficient space”

在你的情况下，设置flex: 1 0 auto 允许nav 增长，但0 阻止它被允许缩小，即使在溢出情况下（你的情况是内联块）。

即如果你想让“所有东西”都包裹在一个弹性容器中，请将它的弹性项目设置为flex: auto;

编辑：出于兼容性问题，将flex: 1 1 auto; 更改为flex: auto;，因为在不久的将来auto 将成为possibly replaced by a 'main-size` keyword。