嵌套式Flexbox不能在Chrome或IE中包装 [英] Nested flexboxes not wrapping in chrome or IE

问题描述

我有几个嵌套的flexbox，我想用于响应式网站，他们可以在Firefox中正常工作，但不是在Chrome或IE。

I have a few nested flexboxes that I want to use for a responsive website, and they work properly in firefox, but not in chrome or IE. The links should be able to wrap so that they are on top of one another when you make the screen smaller.

链接在这里适当地包装： http://jsfiddle.net/6796b/

The links wrap properly here: http://jsfiddle.net/6796b/

但是当他们在另一个flexbox他们停止包装和溢出（注意：只有绿色的链接没有包装/堆叠正确。一切正常工作。）： http://jsfiddle.net/3525C/8/

But when they are in another flexbox they stop wrapping and overflow (Note: Only the green "links" aren't wrapping/stacking properly. Everything else works as intended.): 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;
}

推荐答案

code> flex-shrink 的值 1 ，以使flex项灵活。请参见编辑9 。

You have to apply a flex-shrink value of 1 in order for the flex item to be flexible. See edit 9.

默认为： flex：0 1 auto ，它允许flex项目在空间不足时缩小到最小尺寸

The default being: flex: 0 1 auto which allows the flex item to "shrink to its min-size when there is insufficient space"

，设置 flex：1 0 auto 允许 nav 增长，但 0 防止它被允许收缩，即使在溢出的情况下（这里使用inline-blocks）。

In your case, setting flex: 1 0 auto allows nav to grow, but the 0 prevent it from being allowed to shrink, even in overflow situations (your case here with inline-blocks).

ie如果你想一切包装在一个flex容器，设置其flex项目 flex：auto;

i.e. If you want 'everything' to wrap inside a flex container, set its flex items to flex: auto;

编辑：为了兼容性问题，由于<$ c $更改 flex：1 1 auto; for flex：auto; auto 被替换为'main-size`关键字。

Changed flex: 1 1 auto; for flex: auto; for compatibility concerns, due to auto being possibly replaced by a 'main-size` keyword in the near future.

这篇关于嵌套式Flexbox不能在Chrome或IE中包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！