CSS высота установки гибких контейнеров

Question

У меня есть 3 основных div в моем HTML с идентификаторами (заголовок, вкусы и покупка). Все эти 3 div являются гибкими контейнерами. Я пытаюсь установить высоту каждого деления, но пока я не смог этого сделать.

Это мой код CSS (в качестве примера приведены значения высоты, а не фактические значения, которые я хочу установить):

#header {
  background-image: url("resources/skylight.jpg");
  background-position: center;
  height: 300px;
  display: flex;
  justify-content: center;
  font-size: 55px;
}

#flavors {
  height: 500px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

#purchase {
  height: 200px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Answer 1

Я сделал фрагмент с вашим CSS, я просто добавил немного цвета фона для легкой визуализации ...

#header {
  background: red;
  background-position: center;
  height: 300px;
  display: flex;
  justify-content: center;
  font-size: 55px;
}

#flavors {
  background: aqua;
  height: 500px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

#purchase {
  background: lime;
  height: 200px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div id="header">
</div>

<div id="flavors">
</div>

<div id="purchase">
</div>

Все высоты работают отлично, не могли бы вы дать нам больше информации?