The Sidebar layout

Two columns side by side, which switches to a single column at a specified width. The width is based on the size of the element, not the size of the screen.

![[Sidebar layout.png]]

Given the following DOM:

<div class="with-sidebar">
  <div><!-- sidebar --></div>
  <div><!-- non-sidebar --></div>
</div>

The CSS can look like the following. min-inline-size can be changed to whatever value you want the content to wrap at:

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

.sidebar {
  /* ↓ The width when the sidebar _is_ a sidebar */
  flex-basis: 20rem;
  flex-grow: 1;
}

.not-sidebar {
  /* ↓ Grow from nothing */
  flex-basis: 0;
  flex-grow: 999;
  /* ↓ Wrap when the elements are of equal width */
  min-inline-size: 50%;
}

As always, extra rules can make this more powerful. Using min-width and max-width together on the .not-sidebar class can prevent the inner content from growing, while the sidebar changes as needed.

The .sidebar flex-basis can be omitted to create an intrinsic sidebar width.

Every Layout calls this the 'Sidebar' layout.

[[css]] [[intrinsiclayout]] [[layout]] [[responsivedesign]]