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

Question

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

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

这里有很多关于这个问题的例子。其中大多数接受的解决方案是添加flex-shrink: 0;

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

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

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

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

标签： htmlcssflexboxcross-browser

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

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