html - Overlapping CSS flexbox items in Safari -

what's correct css force safari not overlap flex items within default flex container?

safari seems give width flex items lots of content.

safari: (v8.0.8 on mac os x 10.10.5 yosemite)

the flex items display fine in chrome , 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 eiusmod tempor incididunt ut labore et       dolore magna aliqua. ut enim ad minim veniam.    </div> </main> 

fiddle code:
http://jsfiddle.net/ll05grus/6

the element shrinking. need set flex-shrink property 0 on shrinking element.

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