Why do flex items automatically fill their container horizontally when flex-direction is set to column?

Because the cross axis is horizontal and flex items stretch by defaultBecause align-items is set to center

Because the cross axis is horizontal and flex items stretch by default.