jeudi 6 août 2015

Why does Safari not wrap second div?

I have 2 div in another div. Both are flex and both have a min-width. In Chrome and Firefox, the second one wraps because its min-width forces it, but Safari doesn't warp it as long as those two inner div are flex.

Here is an example:

HTML

<div class="a">
    <div class="b"></div><div class="c"></div>
</div>

CSS

div {
    height: 100px;
}
.a {
    width: 500px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.b {
    min-width: 400px;
    background: red;
    flex: 1;
}
.c {
    min-width: 400px;
    background: yellow;
    flex: 1;
}

Chrome: enter image description here

Safari: enter image description here




Aucun commentaire:

Enregistrer un commentaire