“vh”和“vw”与屏幕高度无关答案

【问题标题】："vh" and "vw" not relative to screen height [closed]“vh”和“vw”与屏幕高度无关
【发布时间】：2021-03-16 05:47:57
【问题描述】：

所以我有一个 div（白色框），然后在里面我有第二个 div（红色框），里面有多个较小的 div（紫色框）：

现在在紫色框的 CSS 中，我将高度设置为 10vh。但是，当我添加更多紫色框时，每个框都会挤压并且高度会降低。我 99% 确定问题出在我为红色盒子使用弹性盒子这一事实。如何让 vh/vw 正常工作，它基于用户的屏幕尺寸？这是我所有 div 的代码：

白区：

.whiteDiv{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 30px;
  width: 30vw;
  height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

redDiv：

.topSectionHistory {
  width: 30vw;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  overflow: scroll;
  background-color: red;
}

purpleDiv：

.purpleDiv{
  border-radius: 30px;
  width: 25vw;
  height: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  background-image: linear-gradient(45deg, #5f72be, #9921e8);
}

如何将 vh/vw 用于紫色框，使其不会调整大小？

【问题讨论】：

请提供带有您的 HTML 标记的minimal reproducible example，这将使我们更容易为您提供帮助
我的意思是我为每个 div 提供了代码。 HTML 只是嵌套每个 div，这不应该太复杂。因此我相信我提供的代码就足够了。
通过提供minimal reproducible example，您可以让我们更轻松地为您提供帮助。我们可以专注于问题，而不必构建要测试的东西，这应该取决于您。不要让我们猜测和假设您的 HTML，提供它。您为问题付出的努力越多，获得帮助的可能性就越大。

标签： html css reactjs flexbox

【解决方案1】：

你可以通过设置'min-height'来改变它。

.whiteDiv {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 30px;
    width: 30vw;
    height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.topSectionHistory {
    width: 30vw;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    overflow-Y: scroll;
    background-color: red;
}

.purpleDiv {
    border-radius: 30px;
    width: 25vw;
    height: 10vh;
    min-height: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    background-image: linear-gradient(45deg, #5f72be, #9921e8);
}

<div class="whiteDiv">
    <div class="topSectionHistory">
        <div class="purpleDiv"></div>
        <div class="purpleDiv"></div>
        <div class="purpleDiv"></div>
        <div class="purpleDiv"></div>
        <div class="purpleDiv"></div>
        <div class="purpleDiv"></div>
    </div>
</div>

【讨论】：

太棒了！谢谢