Nested flexboxes not wrapping in chrome or 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.

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

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;
}

回答1:

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

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

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).

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

EDIT: 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.

来源：https://stackoverflow.com/questions/24336869/nested-flexboxes-not-wrapping-in-chrome-or-ie

标签

html

css

internet-explorer

google-chrome

flexbox