当宽度很小时有子元素堆叠时，“最小高度：100vh”如何工作？

Question

我在一个父元素中有两个子元素：

 <div id="registration">
     <div id="left-panel"></div>
     <div id="right-panel"></div>
 </div>

样式：

#registration{

@include l {
    flex-direction: column;
}

#left-panel, #right-panel{
    width: 50%;
    min-height: 100vh;

    @include l {
         width: 100%;
    }
}

为简单起见，我们假设左面板没有内容，而右面板有内容（未显示）

我已经使它具有响应性，当宽度 > l（即 1025 像素）时，两个面板并排。但是，当宽度

我注意到，当它们堆叠时，一个（比如说左面板）的高度保持不变，而另一个会增加以确保内容不会“溢出”元素。这是因为我将高度设置为 min-height: 100vh 吗？我问是因为如果我将“最小高度：100vh”改为“高度：100vh”，内容就会溢出。

因此，似乎 min-height 会导致父元素（即右面板）的高度发生变化以包含其所有内容。谁能证实这一点？

任何帮助表示赞赏！

Answer 1

在这方面，flex 或 l 没有什么特别之处。

min-height 只是设置元素的最小高度 - 它仍然允许扩展内容的高度会超过元素的高度，但永远不会缩小低于指定值：

min-height CSS 属性设置元素的最小高度。它可以防止 height 属性的使用值变得小于为 min-height 指定的值。

相反，height 是一个固定高度，其中元素不允许扩展，并且内容将被截断，如果内容超出了元素所能容纳的范围：

height CSS 属性指定元素的高度。默认情况下，该属性定义内容区域的高度。

如果no指定height，则使用默认的height: auto，它根据内容的高度为元素提供灵活的高度。该元素的高度将仅与容纳内容所需的高度一样高，并且会无限扩展以包含它。