Во flexbox flex-direction:column при переносе элемента в новый столбец ширина контейнера не увеличивается

В подвале есть несколько меню, каждое flexbox flex-direction:column, высота подвала ограничена, если количество итемов больше чем высота меню они должны переноситься на следующий столбец, соответственно соседнее меню должно отодвигаться. Элемент переносится но ширина контейнера не увеличивается и получается наложение.

Подскажите что я делаю не так или какие есть варианты? пример

<div class="container">
    
    <div class="menu">
      <div class="blok"></div>
      <div class="blok"></div>
      <div class="blok"></div>
      <div class="blok"></div>
      <div class="blok"></div>
    </div>
    <div class="menu">
      <div class="blok"></div>
      <div class="blok"></div>
      <div class="blok"></div>
      <div class="blok"></div>
      <div class="blok"></div>
    </div>
    <div class="menu">
      <div class="blok"></div>
      <div class="blok"></div>
      <div class="blok"></div>
      <div class="blok"></div>
      <div class="blok"></div>
    </div>
  </div>

.container{
  height: 200px;
  background: aqua ;
  display: flex;
  /* gap: 150px; */
  justify-content: flex-start;
}

.menu{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  height: 100%;
  background: yellow;
  border: solid 1px;
}
.blok{
  width: 50px;
  height: 50px;
  background: red;
  margin:2px;
}