IE11 - align items not working with popup

Question

I have a popup that I'm trying to vertically align in the page, I use flex (align-items) to do this but it doesn't work for IE11. After some research I found there is a bug in IE11 where align-items doesn't' work well with min-height. I already tried some of the solutions given but nothing seems to work.

What I tried:

1. Replacing the min-height by height on the popup-inner-wrapper
2. Maintain the min-height and add height of 1px

Output:

1. Centers everything correctly (chrome and IE) but only when there is little content. If you add more text to the example you will see that the top part of the popup is cut
2. Same thing happens as in 1

Example of the code HERE

.popup-wrapper {
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}

.popup-inner-wrapper {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;
  transform: translateZ(0);
}

<div class="popup-mask">
  <div class="popup-wrapper">
    <div class="popup-inner-wrapper">
      <div class="popup-container ">
        <div class="popup-content">
          (text)
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

It's a known issue of IE. The min-height property will not work when used with Flexbox layout in IE. We can use css-tricks to fix it in IE. Give the parent a flex column container in Flexbox layout.

CSS of parent in Flexbox layout:

display: flex;
flex-direction: column;

In your code, you should change the .popup-wrapper style like below:

.popup-wrapper {
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    display: flex;
 }

Result in IE 11: