在Safari中重叠CSS flexbox项目

Question

什么是正确的CSS,以强制Safari不与默认Flex容器中的flex项重叠？

Safari似乎提供了太多的宽度来展示具有大量内容的项目.

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

灵活项目在Chrome和Firefox中显示正常.

铬:

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>

摆弄代码:http:
//jsfiddle.net/LL05grus/6

Answer 1

元素正在萎缩.您需要将flex-shrink属性设置0为收缩元素.

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

Answer 2

我也有一个类似的问题，即 iPad 上的 flex 框方向更改为列重叠项目。问题在于flex: 0 1 0;应用于子元素的属性。给基值自动。flex: 0 1 auto;

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