在 Safari 中重叠 CSS flexbox 项目答案

【问题标题】：Overlapping CSS flexbox items in Safari在 Safari 中重叠 CSS flexbox 项目
【发布时间】：2015-12-17 19:50:06
【问题描述】：

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

Safari 似乎为包含大量内容的 flex 项目提供了过多的宽度。

Safari：（Mac OS X 10.10.5 Yosemite 上的 v8.0.8）

弹性项目在 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

【问题讨论】：

看来这个问题现在已经解决了。在 macOS 10.12 Sierra 上使用 Safari 10.0 进行测试。
是的，似乎问题已在所有最新版本中得到解决，并且提出的问题已经过时/过时了。
@DemPilafian 但我在 macOS 10.14 Mojave 上仍然遇到 Safari 12.1.2 的这个问题

标签： html css safari flexbox

【解决方案1】：

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

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

【讨论】：

这真的很有帮助！但是，我不得不使用 flex: 0 0 auto 来解决我这边的问题。
遇到同样的问题，其中一个弹性项目在 Safari 移动设备上没有足够的空间。这似乎为我解决了这个问题。谢谢
您还可以将flex-shrink: 0; 添加到元素中，以防止其小于最小尺寸。
在移动 safari 9.5 中存在重叠问题。这像魅力一样修复了它！谢谢！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

解决方法似乎对我有用：

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

【讨论】：