Установить высоту гибкого элемента или расширить базу на содержание?

Question

У меня есть этот контейнер-столбец с двумя элементами с классами .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 является индикатором загрузки,.один - это контейнер с высотой 50vh, поэтому при загрузке класс .two остается на той же позиции, но я хочу увеличить высоту класса .one, когда его содержимое превышает 50vh, и предотвратить его наложение на .twoкласс, помощь?

Answer 1

используйте минимальную высоту вместо высоты, тогда один контейнер займет необходимое пространство

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