Вложенные гибкие элементы не создают родительского роста

Я пытаюсь составить заголовок с именами месяцев и всеми днями в этом месяце прямо под именем.

Элементы дней имеют фиксированную ширину, поэтому я подумал: почему бы не использовать flexbox?

По некоторым причинам .day элементы падают из своего родителя, а родительский не растет.

Не могли бы вы дать мне подсказку, почему flex-basis: auto не увеличивает месячный слот после того, как слот сломал его?

Что касается реализации, то я уже нашел обходное решение с использованием float: left вместо использования flexbox. Но я не могу понять, почему он работает таким образом.

.main {
  display: flex;
}

.month {
  flex: 0 0 auto;
}

.days {
  display: flex;
}

.day {
  flex: 0 0 2em;
}

<div class='main'>
  <div class='month'>
    <div class='name'>Jan</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Feb</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
      <div class='day'>7</div>
      <div class='day'>8</div>
      <div class='day'>9</div>
      <div class='day'>10</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Mar</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
    </div>
  </div>
</div>

Ответ 1