在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

虽然我无法再使用 Safari 14.0.2 复制 OP 的问题，但我仍然观察到在某些情况下 Safari 会过度缩小元素，而其他浏览器（如 Safari 和 Firefox）则不会。

虽然设置 flex-shrink: 0; 有效，但在某些情况下，我们打算使用 like flex: 0 1 15% 我们希望收缩发生但不过度收缩的地方。

解决方法似乎对我有用：

min-height: min-content（或min-width）

Answer 3

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

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