CSS
Create Equal Height Columns with Flexbox and flex-grow
Learn how to easily create columns that always have the same height, regardless of their content, using CSS Flexbox properties like `display: flex` and `flex-grow: 1`.
.container {
display: flex;
gap: 20px; /* Optional: for spacing between columns */
}
.column {
flex: 1; /* Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
display: flex; /* Make column content also flex if needed */
flex-direction: column;
}
/* Example content differences */
.column:nth-child(1) {
height: 150px; /* This height will be overridden by flexbox */
}
.column:nth-child(2) p:first-of-type {
margin-bottom: 50px;
}
How it works: This snippet uses `display: flex` on the container to enable flexbox layout. By applying `flex: 1` (shorthand for `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0%`) to each `.column` item, they are instructed to grow and shrink proportionally, filling the available space and naturally matching the height of the tallest sibling. The default `align-items: stretch` on the flex container ensures this equal height behavior.