为什么“最小高度”会影响弹性版式中div的高度？

Question

我在弹性版式父级的min-height上添加了div。如果min-height的实际高度大于div，似乎min-height会影响100px。 以下面的代码为例：

https://codepen.io/zhaoyi0113/pen/ejwJGM

我在div上将div设置为最小高度，但是如果其实际高度大于100，则会相互重叠。在上述情况下，我希望hello显示{ {1}} world在一个块中，但不是。如果检查dom结构，您会发现<p>不会扩展其父div的高度。我该如何解决？

Answer 1

由于您已在.div1弹性框上设置了200px的高度，因此试图将所有子元素都容纳在200px之内，但是最小高度使其无法容纳200px内的所有孩子。

根据您要实现的目标，您可能需要更改.div1的高度或在flex-shrink: 0上添加.div2

Answer 2

尝试更改要继承的段落的高度。

data-target="#myModal"

这将使其继承其父代的高度。

see the result here

Answer 3

另一种解决方案是将display: table;添加到您的div2中。