are included in the calculation, these measurements contribute to the 10% total, causing the line of flexible items to surpass the container’s width. The default box model,
, accounts for borders and padding in addition to width (
), thereby causing wrapping to occur.
Flexbox cannot be used for that purpose, as stated by Michael_B in response to the question.
- Flex Lines
The cross size of each line in a multi-line flex container, even one with only a single line, is the minimum size needed to contain the flex items on the line. After alignment due to align-self, the lines are then aligned within the flex container using the align-content property.
When there are multiple lines in a row-based flex container, each line’s height, also known as the “cross size”, is the minimum size required to accommodate the flex items on that line.
To apply flexbox to the parent element, include the following properties:
- flex-wrap: wrap;
- align-items: stretch.
Regardless of the content inside, there are two options to ensure that size is not an issue:
2. Alternatively, if you can estimate the maximum height, you can achieve this using CSS by setting a minimum height.
There is almost certainly no way to accomplish it solely with flexbox, flex-wrap, and varying content.