Flexbox最大高度百分比值以某种方式与父容器百分比值相关

Question

我有以下有效的flexbox fiddle。在CSS中我将透明横幅的最大高度设置为25％，在输出中图像（flexbox容器）被覆盖50％，请参见此处：

为什么？我希望它能被覆盖25％？

经过一些试验和错误后，我注意到图像的50％最小高度（横幅的容器）以某种方式乘以我想要覆盖的50％，结果为25％。我仍然不知道这是为什么......？

简而言之：为什么透明横幅占50％而不是25％？

Answer 1

agrm是对的，100vh是继承给孩子的。要解决此问题并获得预期的行为，您不仅要将min-height设置为50%，还要将height设置为50%（两者都在父容器中，即{{1} }}）。然后输出将显示透明横幅的25％覆盖率。

这可以被认为是最佳实践，因为它将提供“一致的布局行为”，以防视口中突然只有1个div元素（而不是2个）。然后，这个元素将通过flexbox高度拉伸到全屏高度，并且透明横幅仍将覆盖它25％。然而，如果没有在父容器上设置高度，我最终会得到一个横幅，该横幅持续存在，导致相对于图像的横幅高度（12.5％）太小。