Why Does My Flex Child Not Fill the Container Height?

How to Stretch a Flex Child to Fill the Container Height

When working with Flexbox, it's common to encounter the issue where a child element does not stretch to the full height of its container. This is often due to incorrect usage of the height: 100% property.

In Flexbox, the height: 100% property can be problematic because:

• The parent element needs a fixed height, which goes against the principles of Flexbox.
• When multiple children are present, using height: 100% on one child will ignore the others.

The solution is to remove the height: 100% property and rely on Flexbox's default behavior. By default, flex items in a row direction (the typical layout) align vertically with the property align-items: stretch. This means that the child element will automatically stretch to fill the available height of the container.

Here's an example that demonstrates the correct usage without height: 100%:

<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 height of the container, regardless of the height of the blue child's text. This is because the default align-items: stretch value ensures that flex items are vertically stretched to occupy the available space.

The above is the detailed content of Why Does My Flex Child Not Fill the Container Height?. For more information, please follow other related articles on the PHP Chinese website!