Flexbox父级缩小比儿童小

Question

如何防止此弹性父级缩小到小于子级的高度？灰色容器是flex父级，白色框是子级。

grey box
  display flex

white boxes
  display block
  height 200px

Answer 1

我发现了这个问题;它是由css重置引起的：

body, html { height: 100%; }

一旦我将其更改为：

，问题就消失了

body { height:auto; min-height:100%; }
html { height: 100%; }

Answer 2

我找到了真正的答案。这解决了我的问题：

至少有一个＆＃34;显示的孩子：flex＆＃34;父必须具有属性＆＃34; flex：[some number]＆＃34;。在我的场景中，一旦我为我的孩子设置flex为1，突然另一个孩子停止了奇怪的缩小。

Answer 3

简单回答：在灰色框（容器）上添加min-height: 200px。

（虽然：如果你没有为灰盒子（flex容器）提供高度，它应该已经自动调整大小以适应孩子的身高 - 尽管这取决于上下文例如，如果flex容器的父级是另一个flex容器。无论如何，如果你想要一个更合适的答案，你可能需要提供更多细节和一个工作测试用例。:)）