0

flex-direction: column in combination with align-items: center, flex-start, flex-end,... results in the flex-items not growing in width.

I can solve it by giving the flex-items a width (in %), but I don't understand why they don't grow when the align-items property is used.

Link to code example.

<div class="container">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>


  .container {
  display: flex;
  height: 500px;
  width: 500px;
  flex-direction: column;
  align-items: center;
}

.container div {
  flex: 1;
  /* width: 100%; */
}
Ben_R
  • 73
  • 4

0 Answers0