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 resolve it.

The thing I&#39;m trying to solve, has two aspects. First, getting the modal window vertically centered, which works as expected. The second is to get the modal window to scroll -- externally, so the whole modal window scrolls, not the contents within it (this is so you can have dropdowns and other UI elements that can extend outside of the bounds of the modal -- like a custom date picker, etc.)

However, when combining the vertical centering with scroll bars, the top of the modal can become inaccessible as it begins to overflow. In the above example, you can resize to force the overflow, and in doing so it allows you to scroll to the bottom of the modal, but not to the top (first paragraph is cut off).

Here&#39;s the link to the example code (highly simplified)

https://jsfiddle.net/dh9k18k0/2/

    .modal-container {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);
      overflow-x: auto;
    }
    .modal-container .modal-window {
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // Optional support to confirm scroll behavior makes sense in IE10
      //-ms-flex-direction: column;
      //-ms-flex-align: center;
      //-ms-flex-pack: center;
      height: 100%;
    }
    .modal-container .modal-window .modal-content {
      border: 1px solid #ccc;
      border-radius: 4px;
      background: #fff;
      width: 100%;
      max-width: 500px;
      padding: 10px
    }

This effects (current) Firefox, Safari, Chrome, and Opera.. It does interestingly behave correctly in IE10 if you comment in the IE10 vender prefixed css -- I did not bother testing in IE11 yet, but assume the behavior matches that of IE10.

Any ideas would be good. Links to known issues, or reasoning behind this behavior would also be useful.

All Browser Bugs Solutions on Gang of Coders

Total of 1 Browser Bugs Solutions

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