Usage

HTML

---
import {Icon} from "@astrojs/starlight/components";
---

<div class="l-sidebar">
  <div class="is-sidebar">
    <Icon name="rocket" color="goldenrod" size="10rem" />
  </div>
  <div>
    <div class="l-stack">
      <h2>This is a fluid width column</h2>
      <p>
        If you resize me to be less than the value of the <code>min-width</code>
        property I will stack vertically and both columns will fill width of the
        container.
      </p>
    </div>
  </div>
</div>

SCSS

//https://every-layout.dev/layouts/sidebar/

/**
 * Note, the width of the sidebar will be determined by its content,
 * so there's no need for this component to specify width (by default). 
 */

.l-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sb-row-gap, var(--sb-gap, var(--vertical-rhythm)))
    var(--sb-column-gap, var(--sb-gap, var(--gutter)));
  align-items: var(--sb-align-items, initial);

  > .is-sidebar {
    flex-grow: 1;
  }

  > :not(.is-sidebar) {
    flex-basis: 0;
    flex-grow: 999;
    min-width: var(--sb-min-width, 50%);
  }
}

For when you need a 2 column layout (1 fixed width, 1 fluid width).

Fixed Column (Sidebar)

The fixed width column is assigned the class .is-sidebar. Its width is determined by its content.

Fluid Column

The fluid width column shrinks with the viewport while the Sidebar is in a 2 column layout. When the width goes below --sb-min-width custom property, the layout will switch to a single column.