Why do my flex items looked stretched?

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
1 Like

Why does my container stretch when I use min-height?

1 Like

@jnijnijni, I recommend you check out this question on Stack Overflow. Hope you understand soon!

Happy coding! :wave:

2 Likes

For the stretch id div, it is asking it to take up the parent height size with the minimum set rule. There was no maximum rule set to it, as long as it does not exceed the size of the parent (container).
I hope I am correct.

2 Likes

do stretch does not matter about value of height given to the flex container ?
and what makes difference in value of min-height and height in flex container which affects flex items stretch???

min-height: 75px simply means: "Do not have a height below 75px". This means that it can have a height that exceeds 75px (E.g. 90px or 100px). This means that if there is any reason for it to have a larger height, then there will be no problem. align-items: stretch (which is the default value of the align-items property) stretches flex items along the flex-direction. By default, the flex-direction is row, so flex items will be stretched to have the height of their flex container.

If we gave the flex items a height: 75px, this means that it must always have a height of 75px and nothing can change that, not even align-items: stretch

One thing to keep in mind, if the flex-container doesn’t have a set height, it will have the height required to fit its flex-items.

2 Likes

Per MDN, the following would be more accurate…
When we use display: flex; to create a flex container, align-items: normal; is declared by default on the flex container. For flex items, the normal keyword behaves as stretch.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#values

When I added the given code though to my exercise, the container items seems to be actually stretched vertically.

#stretch {

align-items: stretch;

}