Nakładające się elementy flexbox CSS w Safari

Question

Jaki jest prawidłowy CSS, aby zmusić Safari, aby nie nakładał się na elastyczne elementy w obrębie domyślnego kontenera elastycznego?

Safari wydaje się nadawać zbyt wiele szerokości, aby wygiąć elementy o dużej zawartości.

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

Flex pozycje wyświetlane prawidłowo w Chrome i 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 kodem:
http://jsfiddle.net/LL05grus/6

Answer 1

element maleje. Musisz ustawić właściwość flex-shrink na 0 na kurczącym się elemencie.

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

Answer 2

Ja także miałem podobny problem, gdzie Flex kierunek pudełko zmieniona na kolumnie pokrywały przedmioty na iPadzie. Problem dotyczył właściwości flex: 0 1 0; zastosowanej do elementu potomnego. Podaj wartość bazową auto. flex: 0 1 auto;

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