title: Overlapping CSS flexbox items in Safari
body: <p>What's the correct CSS to force Safari to not overlap flex items within a default flex container?</p>
  
  <p>Safari seems to give too much width to flex items with lots of content.</p>
  
  <p><strong>Safari:</strong> (v8.0.8 on Mac OS X 10.10.5 Yosemite)<br>
  <a href="https://i.stack.imgur.com/6oBeN.png"><img src="https://i.stack.imgur.com/6oBeN.png" alt="flex-items-safari.png"></a></p>
  
  <p>The flex items display fine in Chrome and Firefox.</p>
  
  <p><strong>Chrome:</strong><br>
  <a href="https://i.stack.imgur.com/TiDCv.png"><img src="https://i.stack.imgur.com/TiDCv.png" alt="enter image description here"></a></p>
  
  <p><br>
  <strong>CSS:</strong></p>
  
  <pre><code>main {
     display: flex;
     border: 3px solid silver;
     }
  main &gt;div {
     background-color: plum;
     margin: 10px;
     }
  </code></pre>
  
  <p><br>
  <strong>HTML:</strong></p>
  
  <pre><code>&lt;main&gt;
     &lt;div&gt;
        Doh!!!!!!!!!!!
     &lt;/div&gt;
     &lt;div&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing
        elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Ut enim ad minim veniam.
     &lt;/div&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>Fiddle with the code:<br>
  <a href="http://jsfiddle.net/LL05grus/6">http://jsfiddle.net/LL05grus/6</a></p>