CSS
Achieve Equal Height Columns with CSS Flexbox
Easily create columns that always maintain the same height, regardless of their content, by leveraging the default stretching behaviors of CSS Flexbox for consistent layouts.
.container {
display: flex;
align-items: stretch; /* Default, but explicit for clarity */
gap: 20px; /* Space between columns */
padding: 20px;
background-color: #e6e6e6;
}
.column {
flex: 1; /* Each column takes equal available width */
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.column:nth-child(1) { height: 120px; }
.column:nth-child(2) { height: 80px; }
.column:nth-child(3) { height: 150px; } /* Content will still make them equal */
How it works: When `display: flex` is applied to a container, its direct children (flex items) will automatically stretch to the height of the tallest sibling by default. This makes them 'equal height'. `align-items: stretch` is the default behavior but is included for clarity. `flex: 1` ensures each column takes up an equal share of the available width, making them both equal height and width.