Chồng chéo các mục flexbox CSS trong Safari

Question

CSS chính xác để buộc Safari không chồng chéo các mục flex trong một vùng chứa flex mặc định là gì?

Safari dường như cung cấp quá nhiều chiều rộng cho các mục flex có nhiều nội dung.

Safari: (v8.0.8 trên Mac OS X 10.10.5 Yosemite)

Các mặt hàng flex hiển thị tốt trong Chrome và 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 với mã:
http://jsfiddle.net/LL05grus/6

Answer 1

Nguyên tố này được thu hẹp lại. Bạn cần đặt thuộc tính flex-shrink thành 0 trên phần tử thu hẹp.

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

Answer 2

Tôi cũng gặp vấn đề tương tự khi chuyển hướng hộp flex thành các mục chồng chéo trên iPad. Vấn đề là với thuộc tính flex: 0 1 0; được áp dụng cho phần tử con. Tự động cung cấp giá trị cơ sở. flex: 0 1 auto;

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