最新 Safari 上的 Flexbox 布局 - 压缩内容与拉伸内容答案

【问题标题】：Flexbox layout on latest Safari - squished vs stretched out content最新 Safari 上的 Flexbox 布局 - 压缩内容与拉伸内容
【发布时间】：2020-11-17 14:42:29
【问题描述】：

在下面的示例代码中，我有一个复杂的嵌套容器结构，它表示弹性容器中的蓝色框。整个东西都嵌套在一个滚动容器中。

问题是蓝色容器在 Safari 上被压扁了：

这里有很多关于 SO 的示例涉及此类问题。其中大多数接受的解决方案是添加flex-shrink: 0;

就我而言，这意味着将 flex-shrink 添加到 .stackchild 和 #StackChild。这是一个样式化的反应组件，但为了示例，随机的 CSS 类被替换为一个类和 id 只是为了区分。

当我将flex-shrink: 0 添加到stackchild 时，我在所有浏览器上都遇到了另一个布局问题：

Tbh 我不太确定这里发生了什么...... 知道为什么收缩道具会以这种方式破坏布局吗？以及如何解决这个问题，让所有浏览器都满意？

此处的代码示例：https://codepen.io/pollx/pen/oNbmEoE

【问题讨论】：

标签： html css flexbox cross-browser

【解决方案1】：

在堆栈子项旁边设置最小高度似乎有效。 https://github.com/philipwalton/flexbugs

.stackchild {
  display: inline-flex;
  margin-top: calc(16px / 2);
  margin-bottom: calc(16px / 2);
  min-height: 0;
  flex-shrink: 0;
}

https://codepen.io/jspenc/pen/rNxEOme

【讨论】：