html - 在 Safari 中重叠 CSS flexbox 元素

Question

强制 Safari 不与默认 flex 容器内的 flex 元素重叠的正确 CSS 是什么？

Safari 似乎为包含大量内容的 flex 元素提供了太多宽度。

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

flex 元素在 Chrome 和 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>

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

Answer 1

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

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