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

Question

所以我有一个 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{
  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，使其不调整大小？

Answer 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>