IE11 Flexbox 布局在滚动容器中损坏答案

【问题标题】：IE11 Flexbox layout broken in scrolling containerIE11 Flexbox 布局在滚动容器中损坏
【发布时间】：2019-08-25 00:00:03
【问题描述】：

我确实有一个 flexbox-container 应该包含两个元素。它们都可以有动态内容，这意味着不能指定高度。

容器的最大高度为 400 像素，最大宽度为 300 像素。如果两个元素的高度应大于 400px，则应出现滚动条。 X 轴上不应该有滚动条。

这是我的代码：

body {
  width: 300px;
  height: 400px;
  display: block;
}

.container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  border: 1px solid violet;
}

.element1 {
  flex-shrink: 0;
  width: 100%;
}

.element2 {
  background-color: lightblue;
  flex-shrink: 0;
}

.subelement {
  height: 600px;
}

<div class="container">
  <div class="element1">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
  </div>

  <div class="element2">
    <div class="subelement">Reply</div>
  </div>
</div>

这在 Chrome 中运行良好，结果如下：

这在 IE 11 中不起作用，结果如下：

由于某种未知的原因，第一个元素占据了尽可能多的水平空间，并出现了一个水平滚动条。

任何提示如何在 IE 11 中获得与在 chrome 中相同的行为？

这是一个正在运行的 plunkr：

http://plnkr.co/edit/nJiXeFHzFzL2L5DsRJvi?p=info

【问题讨论】：

发布的代码在 IE 11 中工作。
请注意，IE11 在 jsfiddle、codepen、plnkr 等方面存在问题，不是值得信赖的测试场所。
@LGSon 感谢您的反馈。您运行 plunkr 了吗？它确实不起作用。你在IE 11中检查过吗？你的版本是什么？我的是 11.379.17763.0 在 Win 10 上运行。
Plnkr 甚至没有加载到我的 IE11 中，顺便说一句，它与你的版本号相同，在 Win 10 上。我用你的代码示例制作的内联 sn-p 在 IE 11 上工作得很好。
那你是怎么查的？将完整的代码复制粘贴到 HTML 文件中并在本地运行它确实显示了我上面发布的问题？

标签： html css internet-explorer flexbox internet-explorer-11

【解决方案1】：

只需从 .element1 中删除 width: 100%; 即可解决您的问题。谢谢

body {
  width: 300px;
  height: 400px;
  display: block;
}

.container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  border: 1px solid violet;
}

.element1 {
  flex-shrink: 0;
}

.element2 {
  background-color: lightblue;
  flex-shrink: 0;
}

.subelement {
  height: 600px;
}

<div class="container">
  <div class="element1">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
  </div>

  <div class="element2">
    <div class="subelement">Reply</div>
  </div>
</div>

【讨论】：