Сгибать элемент не будет в следующем ряду (без переноса)

Question

Почему гибкий элемент не попадает в следующий ряд?

Гибкий предмет просто отталкивает в сторону.

.section-header {
  border-top: 1px solid #eee;
  //padding-bottom: 20px;
  background: blue;
}

.section {
  margin-top: 20px;
  background: orange;
  padding: 20px;
}

.desc-label {
  padding-top: 10px;
  flex: 1 0 100%;
  height: 100px;
  background: green;
}

.row {
  width: 50%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  //flex-direction: column;
  //align-items: flex-start;
  padding-top: 20px;
  background: lightblue;
  height: 400px;
}

.section-title {
  flex: 1 0 100%;
  height: 100px;
  background: purple;
}

<div class="section">
  <div class="row section-header">
    <div class="section-title">Engine</div>
    <div class="desc-label">Template Element: Recipe Ingredient</div>
  </div>
</div>

https://codepen.io/anon/pen/rQVbMr

Answer 1

Начальная настройка гибкого контейнера - flex-wrap: nowrap. Это означает, что флекс-элементы по умолчанию вынуждены оставаться в одной строке.

Вы можете переопределить значение по умолчанию, добавив flex-wrap: wrap к контейнеру ( исправленная демоверсия ).

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap