Dem Pilafian Dem Pilafian - 6 months ago 73
CSS Question

Overlapping CSS flexbox items in Safari

What's the correct CSS to force Safari to not overlap flex items within a default flex container?

Safari seems to give too much width to flex items with lots of content.

Safari: (v8.0.8 on Mac OS X 10.10.5 Yosemite)

flex-items-safari.png

The flex items display fine in Chrome and Firefox.

Chrome:

enter image description here



CSS:

main {
display: flex;
border: 3px solid silver;
}
main >div {
background-color: plum;
margin: 10px;
}




HTML:

<main>
<div>
Doh!!!!!!!!!!!
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam.
</div>
</main>


Fiddle with the code:

http://jsfiddle.net/LL05grus/6

Answer

That is a weird issue. You can fix it by flexing the first child as follows:

main >div:first-child {
 -webkit-flex:1 0 auto;
}

(grow = yes, shrink = no, basis: auto)

Comments