Why Doesn't `height: 100%` Work on Flexbox Column Children in Chrome?

Height 100% Not Working on Flexbox Column Child: Browser-Specific Bug

You are facing an issue where child elements within a flexbox column are not responding to height percentages. This problem has been identified in Chrome and may not affect other browsers.

In your code sample:

• .flexbox is set to display as a flexbox container with a direction of column.
• .flex is the flexed element.
• .flex-child is the child element within .flex.

When setting .flex-child to height: 100%, it fails to fill the vertical space of its parent, .flex.

Solution:

To resolve this issue, make the following modifications:

• Change .flex to display as a flexbox: .flex { display: flex; }.
• Remove the height: 100% style from .flex-child.

This change will allow the .flex-child element to fill the available vertical space within .flex.

Explanation:

The flexbox specification states that align-self: stretch (the default for flexed elements) affects only the used value of an element's cross-size property (height in this case). However, percentages are calculated based on the specified value of the parent's cross-size property, not its used value.

Since no height is specified for .flex, the default height is "auto." When you set .flex-child to height: 100%, Chrome calculates the height based on the specified value of .flex, which is "auto." Hence, .flex-child ends up having a height of 0 because "auto" means "as big as needed."

By changing .flex to display as a flexbox, you are explicitly setting its flex direction to row. This allows .flex-child to properly fill the height of .flex as expected.

The above is the detailed content of Why Doesn't `height: 100%` Work on Flexbox Column Children in Chrome?. For more information, please follow other related articles on the PHP Chinese website!