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

Question

我有一个 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 中不起作用，这里是结果：

出于某种未知原因，第一个元素尽可能多地水平 space 并出现水平滚动条。

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

这是一个运行 plunkr:

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

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

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

IE11 Flexbox layout broken in scrolling container

html

css

internet-explorer

flexbox

internet-explorer-11