Internet Explorer 不会使用 flex-direction: column 展开 flexbox

Posted 2023-03-05

【中文标题】Internet Explorer 不会使用 flex-direction: column 展开 flexbox

【英文标题】：Internet Explorer doesn't expand a flexbox with flex-direction: column

【发布时间】：2016-11-26 11:18:35

【问题描述】：

我正在尝试创建一个带有静态标题的容器和一个根据其内容扩展至最大高度的主体。达到最大高度后，正文应滚动。我编写的代码在 Chrome/Firefox 中运行良好，但在 IE 中，容器无法正确展开。

div
  border: 1px solid #DDD;


.container
  max-height: 150px;
  display: flex;
  flex-direction: column;


.header
  height: 40px;


.scroll
  flex: 1;
  overflow: auto;

<div class="container">
  <div class="header">
    header
  </div>
  <div class="scroll">
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
  </div>
</div>

如果我改用flex-direction: row;，高度会适当扩大，但显然我的标题看起来不正确。

是否有一种解决方法可以让带有标题和滚动主体的不断增长的容器与 IE11 和 Edge 一起使用？如果有必要，我不反对放弃 flexbox。

【问题讨论】：

Flex 属性只支持最新的 IE 浏览器...

我只需要支持 IE11 和 Edge，如果有另一种方法来获得具有最大高度和静态标题的增长内容，我不介意放弃 flexbox。我更新了我的问题，谢谢

caniuse 报告了 IE11 中用于 flexbox 的大量错误。对于大多数情况，所有 IE 都是如此。

【参考方案1】：

看起来此代码在 Chrome、Firefox 和 Edge 中按预期工作。问题似乎是 IE11。

这是一种似乎适用于所有四种浏览器的解决方案：

将body 元素设为弹性容器。 对原代码进行一次调整（添加width: 100%）。

html 
  height: 100%;

body 
  display: flex;
  height: 100%;
  margin: 0;

.container 
  max-height: 150px;
  display: flex;
  flex-direction: column;
  width: 100%;  /* adjustment */

.header 
  height: 40px;

.scroll 
  flex: 1;
  overflow: auto;

div 
  border: 1px solid #DDD;

<div class="container">
  <div class="header">
    header
  </div>
  <div class="scroll">
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
  </div>
</div>

jsFiddle

【讨论】：

...难以置信。你能解释一下这里发生了什么吗？

这只是一种绕过浏览器怪癖的方法。 IE11 无法识别您的max-height（如果您将其切换为height，它可以工作）。通过将您的布局嵌套在另一个 flex 容器中，max-height 会突然被识别。 IE11 有许多 flexbox 问题。请参阅此处的“已知问题”标签：caniuse.com/#feat=flexbox

【参考方案2】：

@Michael_B 的修复对我来说并没有真正起作用，因为我的容器不能获得固定/相对高度。此外，制作height: 0 的技巧也不适用于较小的屏幕。

解决方案：在容器周围添加一个 flexbox 包装器

在你的容器周围添加一个包装器会让它神奇地工作：

<div class="container-wrapper">
  <div class="container">
    <div class="header">header</div>
    <div class="scroll">...</div>
  </div>
</div>

然后是样式：

.container-wrapper 
  display: flex;


.container 
  display: flex;
  flex-direction: column;
  min-height: 100vh;


.scroll 
  flex-grow: 1;