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 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!