在 Safari 中重叠 CSS 个 flexbox 项目

Question

强制 Safari 在默认弹性容器内不重叠弹性项目的正确 CSS 是什么？

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

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>

Fiddle 代码：
http://jsfiddle.net/LL05grus/6

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

解决方法似乎对我有用：

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

在 Safari 中重叠 CSS 个 flexbox 项目

Overlapping CSS flexbox items in Safari

html

css

safari

flexbox