css - How to use safe center with flexbox?

Question

Centred flexbox items can have undesirable behaviour when they overflow their container.

Several non-flex solutions have been provided for this issue, but according to MDN there is a safe value which is described as follows.

If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.

It can be used as follows.

align-items: safe center;

Unfortunately, I haven't been able to find any examples or discussions of this, or determine how much browser support there is for it.

I have attempted to use safe in this CodePen. However, it doesn't work for me. The safe seems to be ignored, or perhaps the container element is improperly styled.

I'd really appreciate it if anyone could shed some light on safe and whether and how it can be used to solve the overflow problem, as demonstrated by the CodePen example.

Answer 1

The safe keyword is still a working draft, and not many (if any) browsers support it yet, so to get the same effect, cross browser, use auto margins for now, which should be set on the flex item.

Updated codepen

Note, to compensate for the modal's 50px top/bottom margin, use padding on modal-container.

.modal-container
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;                /*  changed  */
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  padding: 50px 0;                        /*  added  */
  box-sizing: border-box;                 /*  added  */
}
.modal-container > #modal
{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;                         /*  changed  */
  padding: 12px;
  width: 50%;
  background-color: #333;
  cursor: pointer;
}