Dem Pilafian Dem Pilafian - 2 years ago 338
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)


The flex items display fine in Chrome and Firefox.


enter image description here


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


Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam.

Fiddle with the code:

Answer Source

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)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download