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

Question

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

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

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

在我的例子中，这意味着将 flex-shrink 添加到 .stackchild 和 #StackChild。这是一个样式化的 React 组件，但为了示例，随机的 CSS classes 被替换为 class 和 id 只是为了区分。

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

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

Answer 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;
}

Flexbox layout on latest Safari - squished vs stretched out content