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;
}

The CSS goal of data loss prevention

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.

Data loss in the context of CSS Flexbox

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!

Browser support of safe alignment

All three engines support the safe keyword today.

What about the other flex box properties?

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;
}

CSS's unknown unknowns

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!