How Can I Make a Child Div Stretch to the Height of Its Parent with Unknown Height?

Stretching Child Divs to Match Parent Height

When you encounter a situation like the one described, where the height of a child div should match that of its parent but the parent's height is unknown, a solution can be found through flexbox.

To achieve vertical scaling of the child div, the parent element requires the following style:

display: flex;

Additionally, you should add browser prefixes to ensure cross-browser compatibility.

The align-items: stretch; property is also crucial. However, since it is the default value for align-items in flex boxes, you do not need to set it explicitly unless you intend to use a different value.

Flexbox's align-items property affects child elements, not the element it is applied to. To define stretching for child elements, you can use the align-self property.

Consider the following example:

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

In this example, the other-child div exists solely for the purpose of stretching the parent's height. As a result, the child div will occupy 100% of the parent's adjustable height.

The above is the detailed content of How Can I Make a Child Div Stretch to the Height of Its Parent with Unknown Height?. For more information, please follow other related articles on the PHP Chinese website!