CSS
Flexbox: Create Equal Height Columns
Achieve visually uniform equal height columns in a layout, even when content varies significantly, by leveraging Flexbox's default stretching behavior.
<div class="equal-height-container">
<div class="column">
<h3>Column 1</h3>
<p>Short content.</p>
</div>
<div class="column">
<h3>Column 2</h3>
<p>This column has significantly more content than the first one. It will push the column to be taller, but Flexbox ensures all sibling columns stretch to match its height automatically.</p>
<p>More text here to make it taller.</p>
</div>
<div class="column">
<h3>Column 3</h3>
<p>Medium content.</p>
</div>
</div>
.equal-height-container {
display: flex; /* Enables flex context */
gap: 20px; /* Spacing between columns */
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
min-height: 200px; /* Example minimum height */
}
.column {
flex: 1; /* Each column takes equal available space and grows/shrinks */
background-color: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* align-items: stretch is default for flex containers in block-axis direction,
so items will naturally stretch to the height of the tallest sibling. */
}
.column h3 {
margin-top: 0;
color: #333;
}
How it works: This snippet demonstrates how Flexbox naturally creates equal height columns. By setting the parent container to `display: flex`, its direct children (the `.column` elements) become flex items. The default value of `align-items: stretch` causes all flex items to stretch to the height of the tallest sibling item, ensuring a consistent and visually appealing column layout even when content length varies. The `flex: 1` shorthand makes each column grow and shrink equally.