12

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.

Asons
  • 84,923
  • 12
  • 110
  • 165
Chris Talman
  • 1,059
  • 2
  • 14
  • 24
  • Rachel Andrew discusses safe alignment in this [smashing magazine article](https://www.smashingmagazine.com/2019/09/overflow-data-loss-css/#data-loss-and-alignment) There is also a [codepen demo](https://codepen.io/rachelandrew/pen/QWLMrpE) there. By the way: currently safe alignment works on firefox – Danield Sep 16 '19 at 13:17
  • `center safe` works in Chrome 84 – Sphinxxx Aug 07 '20 at 19:41
  • 1
    No, `center safe` does not work in Chrome. – adripanico Sep 02 '20 at 10:30

3 Answers3

15

The newer keyword safe still has bad browser support, 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;
}
Asons
  • 84,923
  • 12
  • 110
  • 165
0

safe isn't implemented in most browsers yet. You can recreate some of its functionality with auto margins.

I was trying to use justify-content: safe center to have a bunch of items centered in a footer when the viewport was wide, but have them able to scroll without clipping off the left side when the viewport was small.

When I tried to fix this with auto margins as Ason suggested, it did fix the clipping, but it also spread the items out evenly, which isn't what I wanted.

I found I could simulate safe center in this context by applying auto margins to only the first and last elements.

Assuming my flex items have class "item":

.item:first-child {
    margin-left: auto;
}
.item:last-child {
    margin-right: auto;
}

CodePen with examples comparing each solution

will
  • 23
  • 5
  • The margin trick does not work in IE 11. For older browser support, you can simply use a table instead. Here is a demo on jsbin: https://output.jsbin.com/kejiquz, for testing browser compatibility on ie browserstack. To edit demo, go here: https://jsbin.com/kejiquz/1/edit?html,css,output). PS: Demo is about vertical centering, not horizontal, sorry – rosell.dk Aug 01 '23 at 10:21
0

Use align-items: flex-start; instead of using it with the safe keyword, Also, you can add margin/padding to get the desired behavior for the same.

Ritik Banger
  • 2,107
  • 5
  • 25