Why Does \"height: 100%\" on a Flex Child Break Flexbox?

Stretching Flex Child to Fill Container Height Without Explicit Parent Height

In situations where we need to stretch a flex child to fill the container's entire height, ensuring the parent's height depends on the contents of another child, setting "height: 100%" on the child can lead to unexpected behavior in Flexbox.

Why Using "height: 100%" Can Break Flexbox

When using "height: 100%" in Flexbox:

• The parent of the element being stretched requires a declared height, which goes against Flexbox's default behavior.
• If there are other children above or below the stretched element, "height: 100%" will ignore their presence and lead to conflicts.

The Solution: Remove "height: 100%"

To achieve the desired stretching without breaking Flexbox, simply remove "height: 100%" from the child element.

Explanation

In Flexbox with row direction (the default), the "align-items" property controls the vertical behavior. Its default setting is "stretch," causing flex items to automatically stretch to fill the available height, provided the parent has no explicit height set.

Code Example

Consider the following code snippet:

<code class="html"><div style='display: flex'>
  <div style='background-color: yellow; width: 20px'></div>
  <div style='background-color: blue'>
    some<br>cool<br>text
  </div>
</div></code>

In this example, the yellow child will stretch to fill the entire height of its parent, while the parent's height will automatically adjust based on the blue child's text content.

The above is the detailed content of Why Does \"height: 100%\" on a Flex Child Break Flexbox?. For more information, please follow other related articles on the PHP Chinese website!