Question

我有一些嵌套的flexbox，我想用于响应式网站，它们在firefox中正常工作，但不能在chrome或IE中使用。当你使屏幕变小时，链接应该能够包裹，以便它们在彼此的顶部。

但当他们在另一个弹性箱中时，他们会停止包裹和溢出（注意：只有绿色＆＃34;链接＆＃34;没有正确包装/堆叠。其他一切都按预期工作。）： 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，允许灵活项目为＆＃34; shrink to its min-size when there is insufficient space＆＃34;

在您的情况下，设置flex: 1 0 auto会使nav增长，但0会阻止它缩小，即使在溢出情况下（您使用内联块的情况）

即。如果你想要一切＆＃39;要包装在Flex容器内，请将其flex项设置为flex: auto;

编辑：由于flex: 1 1 auto;在不久的将来flex: auto;因auto而导致兼容性问题，因此{{1}}已更改{{1}}。

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

1 个答案: