Overlapping CSS flexbox items in Safari

Question

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.

Chrome:

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 1

The element is shrinking. You need to set the flex-shrink property to 0 on the shrinking element.

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

Answer 2

I also had a similar issue where flex box direction changed to column overlapped items on iPad. The issue was with the flex: 0 1 0; property applied to child element. Give the base value auto. flex: 0 1 auto;

.parent{     display: flex;     flex-direction: column; } .parent .child{     flex: 0 1 auto; }