overlay with flexbox and overflow

Question

On a checkout page I make an overlay on top of the website where scroll on body is disabled, but overflow is enabled on the overlay.

But if the viewport is smaller the content on the overlay is clipped.

How to avoid that?

I tried to add overflow:auto to the overlay but it didn't work :

body {
  overflow: hidden;
}

#overlay.active {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow: auto;
  background: yellow;
}

<div id="overlay" class="active">
  <div style="height:300px; background:white; padding:20px">
    content
  </div>
</div>

John Li · Accepted Answer · 2022-12-02T09:31:32.697

2

UPDATE

It seems that adding margin: auto on the child div where content is can solve this:

#overlay > div { margin: auto; }

Use safe for align-items would be a good solution but it only work on Firefox as of now:

align-items: safe center;

Example:

body {
  overflow: hidden;
}

/*  Added on the child div */
#overlay > div {
  margin: auto;
}

#overlay.active {
  position: fixed;
  /*  Can use shorthand (Optional: not supported by older browsers and IE) */
  inset: 0;
  display: flex;
  justify-content: center;
  /*  Safe is only working on Firefox as of now  */
  align-items: safe center;
  padding: 20px;
  background: #fff;
  overflow: auto;
  background: pink;
}

<div id="overlay" class="active">
  <div style="height:300px; background:white; padding:20px">
    content
  </div>
</div>

edited Dec 02 '22 at 09:31

answered Dec 02 '22 at 08:54

John Li

6,976
3
3
27

its still not working :( – clarkk Dec 02 '22 at 09:04
your own example clip the top of the content – clarkk Dec 02 '22 at 09:11
@clarkk My bad, I did not test it on another browser other than Firefox, just realized the `safe` solution only works there. I update another method that can be tried and hopefully it would help. – John Li Dec 02 '22 at 09:24
thanks.. but its still too risky to use `inset` property. It's fairly new and not supported by older browsers – clarkk Dec 02 '22 at 09:25
@clarkk Very true, I revised the comment so it highlights the potential compatibility concern. Thanks. – John Li Dec 02 '22 at 09:34

score 0 · Answer 2 · answered Dec 02 '22 at 09:38

remove the align-items:center; that you have on #overlay.active, the content then scrolls as expected. The #overlay.active only has a single child item, so align-items (which would define how flex items are laid out along the cross axis on the current line) does not actually have any visual effect

overlay with flexbox and overflow

2 Answers2