Why Doesn't My Flexbox Column Child Fill 100% of the Height in Chrome?

Height 100% on flexbox column child

Your issue stems from a conflict in the flexbox specification, which affects how height percentages are calculated in Chrome. According to the flexbox spec, when align-self is set to stretch (the default for flex elements), it adjusts the used value of an element's cross-size property (height in this case). However, percentages operate based on the specified value of the parent's cross-size property, not the used value.

In your example, the CSS for the .flex element is set to flex: 1, which means it'll take up all available space. The .flex-child element has a height setting of 100%, which means it'll take up 100% of the available height, calculated based on the flex parent's specified height. However, the height for .flex is not explicitly set, so it defaults to auto. As a result, Chrome interprets the .flex-child height as 100% of auto, which is why it's not filling the entire .flex element.

To resolve this issue, you need to:

1. Set .flex to display: flex; to ensure it's recognized as a flex container.
2. Remove the height: 100%; statement from .flex-child.

This will allow .flex-child to fill the full height of its parent .flex element.

However, this solution may not work if you're attempting to fill only a portion of .flex. In such cases, you'll need to employ a workaround like adding a second .spacer child to .flex with flex: 1 and setting .flex-child to flex: 9. While this is a less elegant option, it's a workaround to address the spec peculiarity.

It's worth noting that this issue is specific to Chrome and may not occur in other browsers. It's hoped that future updates to the flexbox spec will address this inconsistency and improve cross-browser compatibility.

The above is the detailed content of Why Doesn't My Flexbox Column Child Fill 100% of the Height in Chrome?. For more information, please follow other related articles on the PHP Chinese website!