html - 嵌套的 flexboxes 不包装在 chrome 或 IE 中

Question

我有几个嵌套的 flexboxes，我想将其用于响应式网站，它们在 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

您必须应用 1 的 flex-shrink 值才能使 flex 元素灵活。参见 edit 9 .

默认设置为:flex: 0 1 auto 允许 flex 元素为“shrink to its min-size when there is insufficient space”

在你的例子中，设置 flex: 1 0 auto 允许 nav 增长，但是 0 阻止它被允许收缩，即使在溢出的情况下(你的情况是内联 block )。

即如果您希望“所有内容”都包含在 flex 容器中，请将其 flex 元素设置为 flex: auto;

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