Изменение размера элемента Flex в зависимости от его содержимого

Question

Извините, еще один вопрос, связанный с flexbox :)

У меня есть два гибких элемента:

• Контейнер (красный), содержащий центрированный div (желтый)
• Нижний колонтитул (синий) с неопределенной высотой

Красный контейнер имеет атрибут flex-grow: 1, заставляя его занимать оставшееся место на экране

Проблема возникает, когда желтый элемент больше, чем размер экрана. Я бы хотел, чтобы мой красный контейнер рос на основе его содержимого. Есть идеи, как я могу это сделать?

HTML:

<div class="container">
    <div class="content"></div>
</div>
<div class="footer"></div>

CSS:

body,
html {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: red;
}

.content {
    background: yellow;
    height: 2000px;
    width: 100px;
}

.footer {
    flex-shrink: 0;
    height: 50px;
    background-color: blue;
}

https://codepen.io/stepinsight/pen/roRVGQ

== РЕДАКТИРОВАТЬ ==

Андре помог мне найти ответ, спасибо, куча! Единственное, что вам нужно изменить в приведенном выше коде, это заменить высота на min-height и % на vh для теги body / html 10

body,
html {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

Answer 1

Просто удалите свойство высоты элемента body и добавьте height: 100% в html

* { box-sizing: border-box; }

html { 
  height: 100% 
}

body {  
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0; 
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
}

.content {
  background: yellow;
  height: 2000px;
  width: 100px;
}

.footer {
  height: 50px;
  background-color: blue;
}

Исправлено: https://codepen.io/ferreirandre/pen/maoVvb

Не стесняйтесь играть с высоты .content