在Internet 11中为对话框使用flex时，容器会被切断

Question

我正在尝试创建一个跨浏览器对话框系统。基本上，你点击一个链接，对话框弹出。令人惊讶的是，我让它在包括IE 11在内的所有主要浏览器上运行。唯一的问题是，如果对话框中的内容超过窗口，则在IE 11中该框会被切断。下面是代码：

​

/* 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>

​

巨大的代码块基本上会生成两个对话框。一种是内容很小，所以不超过页面长度，另一种则需要滚动。不幸的是，第二个对话框在IE11中被切断了，它可以在我测试过的所有其他浏览器上工作，包括一些旧版本的Edge和Firefox。IE11到底有什么问题？

理想的解决方案是不需要更改HTML和核心样式.。

您可以在这里下载上述代码为html文件。

谢谢你的帮助！

Answer 1

我认为问题在于柔性箱。在浏览器兼容性的挠曲值中，它说：

不正确地将内联块内容放置在挠性容器中。

如果在display: flex;中删除#dialog-2，则可以修复此问题。您可以像这样更改以下css样式：

.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;
 }