What is safe alignment in CSS?
Briefly

Content that is pushed off the screen in a way a user can't scroll to it (think off the top or left of a browser window, or any element with scrolling overflow) is called data loss. I love the term data loss in CSS because that's exactly what it is.
Here's my own demo for explaining this. I'll post a video here below. Without using the safe keyword, and using align-items: center; in a flexbox context, you can see how if there isn't enough room in an element, it's possible for elements to go up over the top (block start) of the element in such a way it's impossible to scroll to.
Read at Frontend Masters Boost
[
add
]
[
|
|
]