demo · v143

Menu edge fitter

Drag the trigger button anywhere in the stage. Chrome's anchor positioning picks the best fallback (below / above / right / left). Each fallback creates a different available inline size for the menu — and the container query inside the menu adapts to whichever fallback wins.

Behind a flag: CSS Anchored Fallback Container Queries ship in Chrome 143 with chrome://flags/#enable-experimental-web-platform-features. The container will still style on size in any browser supporting CQs; the demo's point is the switch between fallbacks, which requires anchor fallbacks.
drag me ✥

Why this works

  1. Anchor positioning tries each fallback (--below, --above, etc.) and picks the first that fits.
  2. The menu element is a container-type: inline-size.
  3. When the fallback that lands has a different inline size — e.g. --left-side caps width because of the viewport edge — the container query re-evaluates against that size.
  4. Without this feature, the container query would only see the natural width, regardless of which fallback was used.
below
Spawns bottom of anchor, full menu width.
above
Anchor near bottom edge — menu flips up.
right side
Anchor near right — menu sits to the right.
left side
Anchor near right edge AND viewport — menu shrinks to fit.
.menu {
  position-anchor: --trigger;
  position-try-fallbacks: --below, --above, --right-side, --left-side;
  container-type: inline-size;
}

@container menu (max-width: 200px) {
  .menu .item .key { display: none; }   /* hide shortcuts when squeezed */
}

see also