Why do my flex items looked stretched?
When we use
display: flex; to create a flex container,
align-items: stretch; is declared by default on the flex container. This can make our flex items stretch the entire
width (depending on
flex-direction) of the flex container.
If we do not set a
width on our flex items, their
width will be dependent on either the content inside the tallest/widest flex item or the
width of the flex container, if declared, and the flex items will stretch the entire
width of the flex container.
There are many ways to solve this issue, two quick solves include:
- setting the
widthof the flex items
- using a different value than the default,
stretch, for the