Entry 04

Sidebar that wraps on its own

Use it for any pair where one side has an ideal width and the other takes the rest, such as a media object, an input with a button, or a page with an aside.

Open

Make the frame narrower. When the main side would get less than half the width, it wraps below and both sides fill the row.

Code CSS · 16 lines

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.sidebar {
  flex-basis: 20rem;
  flex-grow: 1;
}

.main {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

Why it works, the rules and the credits 2 reasons · 4 rules · support · credits

Why it works

The main side's huge flex-grow takes all the free space, which holds the sidebar at its basis.
Once the main side would get less than half the container it wraps below, and both sides grow to full width.

Rules

The wrap point is a share of the container, not a length. Change min-inline-size to move it.
Drop the sidebar's flex-basis for a sidebar sized by its content.
For a sticky sidebar, add align-self: start beside position: sticky and its inset. The two sides stretch to the same height, and a stretched sidebar has no room to stick.
A bare img or video as one of the sides stretches to the height of the row and distorts. Set align-items: start on the container.

Support

Chrome: 84
Firefox: 63
Safari: 14.1

Credits

Borrowed from: Heydon Pickering and Andy Bell, The Sidebar, Every Layout