Equal Height Columns with Flexbox

Equal Height Columns with Flexbox

Before Flexbox, making columns equal height required JavaScript or CSS hacks (faux columns, table display). Flexbox provides equal height columns by default.

CSS Code

.columns {
  display: flex;
  gap: 24px;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.column-content {
  flex: 1;
}

.column-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

How It Works

The key is the default align-items: stretch on the flex container. This stretches all flex items to match the height of the tallest item in the row. You do not need to set it explicitly — it is the default behavior.

Each column uses flex: 1 to take equal width. The tallest column determines the row height, and all other columns stretch to match.

Internal Layout

To make column footers align across columns (even when content heights differ), each column becomes a nested flex container with flex-direction: column:

• flex: 1 on the content area pushes the footer to the bottom
• All column footers end up at the same vertical position

Multi-row Equal Height

When using flex-wrap: wrap, equal height applies per row, not across all rows. Items in the same row match heights, but different rows can have different heights.

Fixed-width + Flexible Columns

.sidebar { flex: 0 0 250px; }
.main { flex: 2; }
.aside { flex: 1; }

Different flex-grow values create proportional widths. With flex: 2 and flex: 1, the main area is twice as wide as the aside (after the sidebar's fixed 250px is subtracted from the container width).

When Stretch Is Not Desired

If you want items at their natural heights, set align-items: flex-start on the container. This is useful for card grids where you want masonry-style varying heights.