CSS PRIMITIVE LAYOUT

Sidebarで、本文を潰さない2カラムを作る

サイドバーを残すことより、主役が読める幅を守ることを優先する。余裕がなくなったら、自然に縦積みに逃がします。

Try resizing 親幅を変えて、本文が潰れないかを見る

Parent width

Sidebar content min: 60%

Main content

Implementation notes

主役になる本文側に必要な幅を持たせておくと、サイドバーのせいで読みづらい2カラムになる前に、レイアウトが自然に縦積みへ切り替わります。

Readability Flexible No breakpoint

.with-sidebar {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 20px;
}

.sidebar {
  flex-basis: 220px;
  flex-grow: 1;
}

.content {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 60%;
}

Point

Sidebarは、サイドバーを固定するためではなく、主役のコンテンツを潰さないためのプリミティブです。