Safe/unsafe alignment in CSS flexbox

I recently watched the talk "Making Things Better: Redefining the Technical Possibilities of CSS" by Rachel Andrews. The talk included one line of CSS that I haven't seen before.

.something {
  display: flex;
  // what's that?👇 😲 
  align-items: safe center;
}

Rachel explains that when the CSS specs are written, key priority is to prevent data loss. I haven't heard this phrase before.

How often do we face data loss in CSS, and what is done to prevent it?

The goal of CSS is to keep content and elements visible to the visitor. CSS does this by design. Containers expand automatically to the right or the bottom depending on their content. They become scrollable when contents are overflowing.

Unless you break the CSS default behavior with things like overflow: hidden;, the user will be able to access the content.

But when you use Flexbox, there are situations in which the prevention of data loss is not guaranteed.

Let's say you have the following HTML:

<div class="container">
  <span>CSS</span>
  <span>is</span>
  <span>awesome!</span>
</div>

and use align-items to center them. What happens if the elements won't fit into the container?

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}

The align-items property aligns child elements centered along the cross-axis. Great stuff — but in case of a small container/viewport size, we end up with data loss.

Due to the flexbox alignment, the elements are centered no matter what. The child elements overflow on the right and(!) left side. And unfortunately, you can't scroll to the overflowing area on the left – say hello to data loss.

This situation is when the safe keyword property helps. The CSS Box Alignment Module Level 3 (still in draft state) defines safe alignment as follows:

"Safe" alignment changes the alignment mode in overflow situations in an attempt to avoid data loss.

If you define safe alignment, the aligning elements will switch to start alignment in case of an overflowing situation.

.container {
  display: flex;
  flex-direction: column;
  align-items: safe center;
  width: 50%;
}

safe alignment leads the browser to always place elements accessible to the user. Win win!

At the time of writing Chromium and Firefox support the safe keyword. Safari's recent Tech Preview includes it so that we can use safe across browsers soon.

MDN Compat Data (source)

Browser support info for `safe` and `unsafe`

115	115	115	63	63	17.6	17.6	23.0	115

Is it a big deal to ship align-items: safe center; today?

Not really. Safari recognizes the keyword. It just doesn't have any effect. So it's safe to use.

You might now wonder if the safe keyword is only an align-items thing? Of course, it's not. You can also define it for justify-content, align-self or justify-self.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

It never appeared to me that centered alignment could cause data loss. The described example shows how complex CSS specs and layout are. The people working on specs have my most profound respect!