html - 设置 flex 元素的高度或根据内容扩展？

Question

我有一个 flex 列容器，其中包含两个元素，其中包含 .one 和 .two 类:

.container {
  display: flex;
  flex-direction: column;
}

.one {
  height: 50vh;
  background: blue;
}

.two {
  height: 50px;
  background: red;
}

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
</div>

这个问题是当.one的内容大于50vh时它与.two类重叠，.two类是加载指示符，.one是50vh高度的容器，所以当它加载时， .two class 保持在同一位置，但我想在内容大于 50vh 时增加 .one class 的高度，并防止它在 .two class 上重叠，有帮助吗？

Answer 1

使用最小高度而不是高度然后。一个容器将占用它的必要空间

.one {
  min-height: 50vh;
  background: blue;
}