设置弹性项目的高度或根据内容扩展？

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类保持在同一位置，但是我想增加.one类的内容大于50vh的高度，并防止它在.two类上重叠，帮助吗？

Answer 1

使用min-height而不是height，那么一个容器将占用必要的空间

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