1

I'm building a layout with flexbox for my application. The modal where I'm supposed to display the data is centred both vertically and horizontally through the following code:

  .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 100;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      margin: auto;
      padding: 20px;
      overflow-y: auto;
    }

When the height is enough to display all the modal it works fine on all browsers, but when the height is not enough even with the scrollbar is impossible to reach the top of the modal:

enter image description here

As you can see from the image even if the scrollbar reached the top corner, there is still part of the modal that is hidden above it. If I remove the property:

      justify-content: space-around;

it works, but then the modal si no longer centred:

enter image description here

How can I fix this?

dippas
  • 58,591
  • 15
  • 114
  • 126
ste
  • 3,087
  • 5
  • 38
  • 73
  • 1
    margin?padding? – ProEvilz Nov 16 '17 at 15:26
  • 1
    You're going to have to post some HTML. And @ProEvilz is correct, margin makes no sense - the modal wrapper is 100% width and height - why does it need a margin (even auto)? I'm willing to bet it's a problem with the styling of whatever is **inside** `.modal` - not with `.modal` itself. – Adam Jenkins Nov 16 '17 at 15:27
  • Not sure why you need flex direction column but that's probably part of the issue – Huangism Nov 16 '17 at 16:29

0 Answers0