Elementi di flexbox CSS sovrapposti in Safari

Question

Qual è il corretto CSS per forzare Safari a non sovrapporre gli elementi flessibili all'interno di un contenitore flessibile predefinito?

Safari sembra dare troppa larghezza per piegare gli oggetti con un sacco di contenuti.

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

Le voci flex visualizzare bene in Chrome e 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> 

violino con il codice:
http://jsfiddle.net/LL05grus/6

Answer 1

L'elemento si sta restringendo. È necessario impostare la proprietà flex-shrink su 0 sull'elemento di restringimento.

Answer 2

Avevo anche un problema simile in cui la direzione della casella flessibile è stata modificata in elementi sovrapposti di colonne su iPad. Il problema era con la proprietà flex: 0 1 0; applicata all'elemento figlio. Dare il valore base auto. flex: 0 1 auto;