Why is 'height: 100%' not working on a flexbox column child in Chrome?

Height 100% on flexbox column child not working: A Chrome issue

In flexbox, it's expected that children elements should fill the available height as specified by the height:100% property. However, this behavior is broken in Chrome when the parent element is a flexbox column.

In the provided example, the following code aims to create a flexbox column layout:

.flexbox {
  display: flex;
  flex-direction: column;
  height: 100%;
}

And the child element is set to fill the available height:

.flex-child {
  height: 100%;
}

However, in Chrome, the child element doesn't respond to the height:100% property, leaving it with an undefined height.

Solution:

The issue can be resolved by modifying the following:

1. Set the parent element .flex to display: flex. This is a crucial step that explicitly instructs the browser to use the flexbox layout.
2. Remove the height: 100% property from the child element .flex-child. This eliminates the confusion caused by the browser trying to apply the percentage value to an unspecified parent height.

Explanation:

Flexbox follows the specification to the letter. The align-self: stretch value, which is the default for flexed elements, modifies only the "used" value of the cross-size property (in this case, height), not its "specified" value. Percentages, on the other hand, are calculated based on the specified value of the parent's cross-size property.

Since .flex doesn't have a specified height, attempting to set height: 100% on .flex-child results in 100% of .flex's unspecified height, which is essentially "auto." This causes the browser to misinterpret the intent.

By setting .flex to display: flex, we force the browser to use the flexbox layout, ensuring that the elements are laid out correctly. Additionally, removing the height: 100% property on .flex-child allows the element to inherit the specified height of its parent, .flex.

Limitations:

While this solution works for filling the entire space of .flex, it may not work if only a portion of .flex is intended to be filled. In such cases, a workaround using absolute positioning or multiple flexbox children may be necessary.

The above is the detailed content of Why is 'height: 100%' not working on a flexbox column child in Chrome?. For more information, please follow other related articles on the PHP Chinese website!