safe and unsafe alignment: the keyword that prevents data loss

· Tags: flexbox, accessibility

Centre a flex item that is wider than its container with justify-content: center. The item overflows equally on both sides. If the container has overflow: hidden or sits inside a scroll container that does not scroll horizontally, the start of the content is now unreachable. This is called data loss in the spec. The fix is two extra letters.

What the keywords do

CSS Box Alignment Module Level 3 introduces safe and unsafe modifiers on alignment values. They apply to justify-content, align-items, align-self, and the place-* shorthands. The syntax is justify-content: safe center.

  • unsafe: align as requested even if it causes overflow on the start side. This is the historical default.
  • safe: if alignment would cause overflow, fall back to start. Content is preserved at the cost of visual centring.

Why the default is unsafe

For backwards compatibility. The CSS Working Group could not change the default without breaking existing layouts that rely on visible-but-clipped centred content. Tab Atkins explains the reasoning in the www-style mailing list thread “On safe vs unsafe alignment” (October 2016). The keywords are opt-in.

Where to actually use it

Modal dialogs and toolbars, where the centred element may grow with translation. A toolbar centred with justify-content: center looks fine in English; translate the labels to German and three buttons get pushed off the left edge with no scrollbar to recover them. justify-content: safe center falls back to start alignment when the toolbar overflows, keeping every button reachable.

Sidebar navigation that vertically centres but might exceed the viewport height with many items. align-content: safe center avoids the case where the top items scroll off the top of the page.

Browser support

Firefox shipped safe and unsafe in 2018. Chromium added them in 2024 (Chrome 124, April 2024) after a long delay tracked in the Chromium bug tracker. Safari followed in 16.4. As of late 2025 they are baseline-supported, though older Edge legacy still needs a feature query.

@supports (justify-content: safe center) {
  .toolbar { justify-content: safe center; }
}

The grid case

Same keywords work in CSS Grid for the same reason. A grid track that overflows its container can lose data when centred. The fix is identical.

Related

Get FlexFrog on the App Store. Built by Moruk Labs.