Container gets cuts off when using flex for a dialog in Internet Explorer 11

Question

I am trying to create a cross-browser dialog box system. Basically, you click a link and the dialog pops down. Surprisingly, I got it to work on all major browsers, including IE 11. The only issue is if the content inside the dialog box exceeds the window, the box gets cut off in IE 11. Here's the code:

/* Core styles */
html,
body {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
}
.page {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.content-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
}
.card {
    position: relative;
    box-sizing: border-box;
    margin: 3rem;
    padding: 3rem;
    color: rgba(0, 0, 0, 0.8);
    background-color: #ffffff;
    border-radius: 0.4rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Dialog styles */
.dialog-outer {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1);
    transition: all .4s cubic-bezier(.25, .8, .25, 1);
    z-index: 99;
    outline: none;
}
.dialog-outer .dialog-inner {
    height: 100%;
    overflow: auto;
}
.dialog-outer .dialog-inner .dialog-content {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.dialog-outer .dialog-inner .dialog-content .card {
    margin: auto;
}
.dialog-outer:target {
    top: 0;
}
.dialog-outer:target ~ .page .content-wrapper {
    overflow: hidden;
}
.dialog-outer:target .dialog-content {
    top: 0;
}

<!-- Dialog 1 -->
<div class="dialog-outer" id="dialog-1">
  <div class="dialog-inner">
    <div class="dialog-content">
      <div class="card" style="width: 400px;">
        <strong>Dialog 1</strong>
        <br /><br />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#">Close</a>
      </div>
    </div>
  </div>
</div>

<!-- Dialog 2 -->
<div class="dialog-outer" id="dialog-2">
  <div class="dialog-inner">
    <div class="dialog-content">
      <div class="card" style="width: 400px;">
        <strong>Dialog 2 (long scrolling content)</strong>
        <br /><br />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#">Close</a>
      </div>
    </div>
  </div>
</div>

<!-- Page -->
<div class="page">
  <div class="content-wrapper">
    <div style="padding: 20px;">
      <!-- Toggles -->
      <a href="#dialog-1">Toggle dialog 1</a>
      <br /><br />
      <a href="#dialog-2">Toggle dialog 2</a>
    </div>
  </div>
</div>

The huge chunks of code basically generates 2 dialog boxes. One where the content is tiny, so it does not exceed the page length, the other need requires scroll. Unfortunately, the second dialog box gets cut off in IE 11. It works on all the other browsers I tested on, including some old versions of Edge and Firefox. What exactly is the issue on IE 11?

The ideal answer would be one that requires no changes to the HTML markup, and the core styles.

You can download the above code as an HTML file here: https://anonfile.com/933cv8o0o0/dialog_html

Thanks for any help!

Answer 1

I think the issue is with flexbox. In the flex value of browser compatibility, it says:

IE incorrectly positions inline block content inside flex containers.

The issue can be fixed if you remove display: flex; in #dialog-2. You could change the following css styles like this:

.dialog-outer .dialog-inner .dialog-content {
    position: absolute;
    box-sizing: border-box;
    /*display: flex;*/
    flex-direction: column;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;                    
 }

 #dialog-1 .dialog-inner .dialog-content {
    display: flex;
 }