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.
<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%; */
}