Introduction
When using Flexbox, applying a height: 100% to a child element may not result in the expected height. We recommend using align-items: stretch as a solution to this problem.
Cause of the problem
If align-items: stretch is applied to a parent element of Flexbox, its child elements will stretch or shrink to match the height of the parent element. However, if the child element does not have an explicit height orflex-basis set, the 100% height will not be applied correctly.
Solution.
Use align-items: stretch to stretch the child element to match the height of the parent element. This allows the child element to be the full height of the parent without having to specify something like height: 100%.
Example of actual use
.flex-parent { display: flex; align-items: stretch; }
.flex-child { /* This will make the parent element full height */ }Conclusion
When using Flexbox, one must be careful about the height issue of child elements; using align-items: stretch, this problem can be easily solved.