Гибкий элемент не заполняет 100% высоты в гибком контейнере

Question

У меня есть следующая разметка:

.container {
  display: flex;
  width: 500px;
}

.col1 {
  background: red;
  height: 100%;
  width: 50px;
}

.col2 {
  background: blue;
  flex: 1;
  height: 200px;
}

<div class="container">
  <div class="col1"></div>
  <div class="col2"></div>
</div>

И я ожидаю, что это будет выглядеть так:

Но вместо этого, когда отображается в браузере и проверяется, высота .col1 является 0px, Я ожидаю, что это будет 200px поскольку .col2 растягивает высоту контейнера до этого размера. Что я делаю неправильно?

Answer 1

Удалить height: 100% от .col1, лайк:

.col1 {
    background: red;
    width: 50px;
}

Посмотрите на фрагмент ниже:

.container {
    display: flex;
    width: 500px;
}
.col1 {
    background: red;
    width: 50px;
}
.col2 {
    background: blue;
    flex: 1;
    height: 200px;
}
body {
    margin: 0;
}

<div class="container">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

Надеюсь это поможет!