IE11垂直柔性盒布局高度：自动和溢出不起作用

Question

我有两个垂直框，两个都有height: auto，如果内容超过父级定义的最大高度，则需要滚动第二个框。

＆＃13;

＆＃13;

.wrapper {
  position: fixed;
}

.popup {
  position: fixed;
  width: 200px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

.a {
  left: 0
}

.b {
  left: 200px;
}

.header {
  flex: 0 0 auto;
  border: 2px solid green;
}

.body {
  flex: 1 1 auto;
  overflow: auto;
}

＆＃13;

<div class="wrapper">
  <div class="popup a">
    <div class="header">
      first popup
    </div>
    <div class="body">
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
      incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
      voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
    </div>
  </div>
  <div class="popup b">
    <div class="header">
      second <br> popup
    </div>
    <div class="body">
      "Sed ut perspiciatis unde omnis istiam, eaqcabo. Nemo enim ipsam voluptatem quia voluptas
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

除了在IE11中，溢出的容器不会滚动，所以一切都很好。

任何方式我都可以在IE11和现代浏览器上有这种确切的行为吗？

PS：如果我能够为标题定义一个高度，那么会有一个解决方案吗？

Answer 1

IE11中的Flex项目忽略容器上的max-height和min-height。

您的Flex容器（.popup）设置为max-height: 300px。

弹性项目（header和body）可能并不在乎。他们忽略了高度命令。

有关此行为的说明，请改用height: 300px。现在它有效。

解决方案＃1 ：如果您可以使用height代替max-height，则问题就解决了。 （demo）

此外，虽然此问题适用于Flex容器，但它不适用于Flex项目。 IE11中的弹性项目会尊重min-height和max-height。

因此，您可以使.wrapper成为灵活容器，这也会使.popup个柔性容器成为弹性项目。现在max-height按预期工作。

如果.popup元素没有使用固定定位，这足以解决问题。设置为position: fixed的Flex项目将从正常流程中删除，其中包括从flex布局中删除。因此.popup项不再是弹性项目。

解决方案＃2：如果您可以在.popup元素上没有固定定位的情况下工作，那么将父级设为灵活容器，您可以全部设置。 （demo）

参考文献：

• IE11 min-height bug report（似乎也适用于max-height）
• "As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout."