Nested flexboxes do not wrap in chrome or IE

Question

I have some nested flexbox that I want to use for a responsive website, and they work correctly in firefox, but not in chrome or IE. Links should be able to wrap so that they are on top of each other when you make the screen smaller.

Links here wrap here: http://jsfiddle.net/6796b/

But when they are in another flexbox, they stop wrapping and overflowing (Note: only green "links" do not wrap / fit correctly. 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;
}

Answer 1

flex-shrink 1, . . 9.

: flex: 0 1 auto, flex " "

flex: 1 0 auto nav , 0 ( ).

. "" flex, flex: auto;

EDIT: flex: 1 1 auto; flex: auto; , - auto .