Can't scroll to top of flex item that is overflowing container

Question

So, in attempting to make a useful modal using flexbox, I found what seems to be a browser issue and am wondering if there is a known fix or workaround -- or ideas on how to

Answer 1

According to MDN, the safe value can now be provided to properties like align-items and justify-content. It's 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.

So, it might be used as follows.

.rule
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: safe center;
}

However, it's unclear how much browser support it has, I could not find any examples of its use, and I have been having some issues with it myself. Mentioning it here to draw more attention to it.