IE 11 Flexbox子溢出容器[重复]

Posted 2023-03-05

【中文标题】IE 11 Flexbox子溢出容器[重复]

【英文标题】：IE 11 Flexbox child is overflowing container [duplicate]

【发布时间】：2020-03-15 20:40:28

【问题描述】：

我整理了以下示例。它适用于所有主流浏览器，但不适用于 IE11。内容 div 溢出 flex 容器（没有滚动条）并向下推页脚。有什么建议？

html,
body 
  padding: 0;
  margin: 0;


.c1 
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
  max-width: 500px;
  max-height: 100px;


.h,
.f 
  flex: 0 0 auto;


.b 
  border: 1px solid red;
  flex: 1 1 auto;
  overflow: auto;

<div class="c1">
  <header class="h">header</header>
  <div class="b">What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  </div>
  <footer class="f">footer</footer>
</div>

【问题讨论】：

IE11 在弹性容器上使用 max-* 和 min-* 属性时存在一个已知错误。本质上，弹性容器会忽略它们。解决方案是将容器也变成一个弹性项目。将display: flex 添加到父级。您还需要将width: 100% 添加到孩子以处理另一个错误。 jsfiddle.net/jq5eym8x

【参考方案1】：

尝试将 c1 类中的 ma​​x-height 属性替换为 height 将有助于解决问题。

.c1 
      border: 1px solid blue;
      display: flex;
      flex-direction: column;
      max-width: 500px;
      height: 100px;
    

IE 11 中的输出：

【讨论】：

谢谢，但我确实需要设计的最大高度。

IE 浏览器在使用 flex 的最小或最大高度/宽度时存在一些问题。它无法正确计算值。如果可能的话，您可以尝试将此样式仅应用于 IE 浏览器。所以它不会影响其他浏览器的结果。

你建议怎么做？

你的意思是你如何应用IE的特定样式？如果是，那么您可以尝试使用 JS 代码来识别浏览器并尝试应用 CSS 类。让我知道，如果我误解了什么。我会努力纠正自己。感谢您的理解。