高度:自动和溢出的IE11垂直弹性框布局不起作用

Question

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

​

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

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

​

一切都很好，除了在IE11中，overflow中的容器不会滚动。

有没有办法让我在IE11和现代浏览器上都有这样的行为？

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

Answer 1

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

您的flex容器(.popup)被设置为max-height: 300px。

flex项(header和body)并不关心。它们会忽略那个高度命令。

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

解决方案#1：如果您可以使用height而不是max-height，那么您的问题就解决了。(demo)

此外，虽然这个问题适用于flex容器，但它不适用于flex项。min-height和max-height在IE11中的flex项上是受尊重的。

因此，您可以使.wrapper成为flex容器，从而使.popup flex容器也成为flex项。现在，max-height可以正常工作了。

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

解决方案#2:如果您可以在不固定定位.popup元素的情况下工作，那么将父元素设置为flex容器，您就可以完成所有的工作。(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."