Question

Why do my flex items looked stretched?

Answer

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 height or width (depending on flex-direction) of the flex container.

If we do not set a height/width on our flex items, their height/width will be dependent on either the content inside the tallest/widest flex item or the height/width of the flex container, if declared, and the flex items will stretch the entire height/width of the flex container.

There are many ways to solve this issue, two quick solves include:

setting the height/width of the flex items

using a different value than the default, stretch, for the align-items property