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

Posted 2023-03-05

【中文标题】具有高度的 IE11 垂直弹性框布局：自动和溢出不起作用

【英文标题】：IE11 vertical flex-box layout with height:auto and overflow doesn't work

【发布时间】：2018-10-07 07:54:45

【问题描述】：

我有两个垂直框，两个都有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 中，一切都很好。

有什么方法可以在 IE11 和现代浏览器上实现这种精确的行为？

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

【问题讨论】：

我真的应该进入它给你一个明确的答案，但是 IE 中的 flexbox 充满了错误。列表请参考caniuse

@giorgio 我知道，但相信我，支持它并不是我真正的选择

【参考方案1】：

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

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

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

为了说明这种行为，请改用height: 300px。现在它起作用了。

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

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

因此，您可以将.wrapper 设为弹性容器，这也将.popup 弹性容器变为弹性项目。现在max-height 按预期工作。

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

解决方案#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."

【讨论】：

如您所见，.popup 元素设置了max-height。

是的，但只是说我在遵守规则，IE11 不是。

考虑到我实际上可以为标题设置一个高度，但仍然不确定仅使用 css 会有什么帮助

jsbin.com/megafel/17/edit 将两个容器设置为 position: absolute 并将 wrapper 设置为 flex 容器。问题未解决

我知道，可惜我做不到。现在我不得不使用完全超出这个问题范围的javascript解决方案。很高兴知道，至少我没有被困在一个小问题上。