Why Does `height: 100%` Value 'work' For Child Tags Of Grid-items?

Consider this: Because of the CSS line: .grid-item > p { height: 100%; } The p tags have the same height as the grid-items. This is great, as this is what I wa

Solution 1:

This is related to the stretch default alignment of grid item.

Note: Since formulas calculated using only definite sizes, such as the stretch fit formula, are also definite, the size of a grid item which is stretched is also considered definite.

As you can see, the size is definite so it can be used as reference for percentage.

---

Same logic for flexbox:

If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved

Related question with non-intuive percentage behavior: https://stackoverflow.com/a/52137966/8620333