Flexbox父母收缩比孩子小

Question

我怎样才能防止这个灵活的父母收缩到比孩子的身高小呢？灰色的容器是弹性的父母，白色的盒子是孩子。

​

​

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

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

"display: flex“父类的至少一个子级必须具有属性"flex: some”。在我的场景中，当我为我的孩子设定弯曲值为1时，另一个孩子突然停止了奇怪的收缩。

Answer 3

简单的回答:在灰色框(容器)上添加min-height: 200px。

(不过:如果你没有为灰色盒子(柔性容器)提供一个高度，它应该已经自动大小以适应它的孩子的高度-尽管这取决于上下文，例如如果flex容器的父容器是另一个flex容器。无论如何，如果您想要一个更合适的答案，您可能需要提供更多的细节&一个有效的测试案例。：)