Dashboard
The sidebar uses height: stretch — it fills the available space in the flex row without 100vh or explicit height calculations. Resize the window or change the topbar height and it still works.
v138 · css
Sidebar Layout
height: stretch fills the remaining space in the parent container accounting for margins — no need for 100vh, calc(100% - Npx), or flexbox hacks. This is the canonical use case: a sidebar that fills from below the topbar to the bottom of the viewport without magic numbers.
Feature detection: checking…
height method:
The margin problem — why 100% overflows and stretch doesn't
width: 100% — overflows parent margin
margin: 8px → bar escapes container boundary
width: calc(100% - 16px) — works but brittle
magic number tied to margin value
width: stretch — fills available, respects margin
no magic numbers — stretch accounts for margin automatically
/* 3 approaches for a sidebar that fills the remaining height */
/* ❌ 100% — often broken: only works if parent has explicit height */
.sidebar { height: 100%; }
/* ⚠ calc() — fragile: breaks when topbar height changes */
.sidebar { height: calc(100vh - 40px); }
/* ✅ stretch — fills available space, respects margins, no magic numbers */
.sidebar { height: stretch; }
/* stretch also applies to width — fills inline available space */
input { width: stretch; } /* vs: width: calc(100% - margin-left - margin-right) */
/* Browser prefix history:
-webkit-fill-available (old Chrome/Safari)
stretch (standardised, Chrome 138+) */