CSS <overflow-position> Data Type

The CSS <overflow-position> data type controls how an alignment value behaves when the aligned content is larger than its alignment container and could overflow. It uses the safe and unsafe keywords together with certain alignment values.

Syntax

The <overflow-position> data type accepts one of two keyword values:

<overflow-position> = unsafe | safe

The keyword appears before an alignment position when the applicable CSS property allows overflow alignment:

safe center
unsafe center
safe end
unsafe end

Overflow Position Values

Value	Description
`safe`	Changes the alignment when necessary to avoid an unsafe overflow condition.
`unsafe`	Preserves the requested alignment even when the aligned content overflows the alignment container.

safe Alignment

The safe keyword tells the browser to protect against an unsafe overflow condition. If the requested alignment would cause the alignment subject to overflow in a way that could make content difficult or impossible to access, the alignment is changed to start alignment.

.example {
  justify-content: safe center;
}

If centering does not create an unsafe overflow condition, the content remains centered.

unsafe Alignment

The unsafe keyword tells the browser to honor the specified alignment even when the alignment subject is larger than the alignment container and overflow occurs.

.example {
  justify-content: unsafe center;
}

This can cause content to extend beyond the container on both sides when the content is too large to fit.

Using Alignment Values

The <overflow-position> keyword is used as part of an alignment value rather than by itself. Depending on the property, it can be combined with positional alignment keywords such as center, start, end, self-start, or self-end.

safe center
safe end
unsafe center
unsafe end

The exact combinations allowed depend on the grammar of the individual alignment property.

<overflow-position> Example

The following example compares safe center and unsafe center. Each child is wider than its container, causing the overflow-position value to affect its alignment:

.safe {
  justify-content: safe center;
}
.unsafe {
  justify-content: unsafe center;
}

Browser Result

safe center

300px wide content

unsafe center

300px wide content

With safe center, the overflowing item falls back to start alignment. With unsafe center, it remains centered even though part of the item extends beyond the container.

The <overflow-position> data type is used by CSS alignment properties that support overflow alignment, including:

Specifications

The <overflow-position> data type is defined in the CSS Box Alignment Module Level 3 .

CSS <overflow-position> Data Type