在 Safari 中重叠 CSS flexbox 项目

Posted 2023-03-05

【中文标题】在 Safari 中重叠 CSS flexbox 项目

【英文标题】：Overlapping CSS flexbox items in Safari

【发布时间】：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 的这个问题

【参考方案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）