Почему дивы в flex-контейнере не растягиваются в высоту?

Question

[Vadim Rublev]

В конструкторе https://basicweb.ru/css/flexbox_generator.php дивы растягиваются в высоту, но этот же код в песочнице https://codepen.io/valera10/pen/yLQJJWa не работает. Что не так?

Код:
HTML

<div id='flex-container'>
  <div>1</div><div>2</div>
</div>

CSS

* {box-sizing: border-box; }
#flex-container {background: rgb(0, 150, 208); display: flex; height: 100%; flex-wrap: wrap; }
#flex-container > div {background: rgb(241, 101, 41); border: 1px solid; width: 100%; }
#flex-container > div:nth-of-type(1) {align-self: stretch; width: 10%; }
#flex-container > div:nth-of-type(2) {width: 90%; }

Answer 1

[Vadim Rublev]

Помогло:

1. html, body {height: 100%; }
В конструкторе, видимо, это прописано само собой, о чем умалчивается.

2. Вместо 100% указать 100vh

Answer 2

[Kinolog76]

задай вытосу контейнера #flex-container в px а не в процентах

Comments

[Vadim Rublev]

Это понятно.
Вопрос о другом: почему там работает, а тут - нет?

Уже не говоря о том - зачем мне пиксели, если мне надо растянуть блоки на высоту страницы.
Верстка адаптивная. Тогда уж не явно пиксели ставить надо, а функцию вычисления высоты...

[Сергей delphinpro]

Vadim Rublev, 100vh - высота окна браузера. и не потребуются извраты с html, body {height: 100%; }

[Vadim Rublev]

Работает. Спасибо!

Но ведь 100% это тоже самое, почему не работает с процентами, интересно.

[Kinolog76]

Vadim Rublev,
1. В вопросе надо было бы уточнить, что тебе нужно на всю высоту страницы а не как в примере
2. В примере задана конкретная высота в пикселях для контейнера - это и есть ответ на твой вопрос

[Vadim Rublev]

> В примере задана конкретная высота в пикселях для контейнера
Где это? По коду, который тут (в кодпене уже изменено).