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

Question

我确实有一个应包含两个元素的flexbox容器。它们都可以具有动态内容，这意味着无法指定高度。

容器的最大高度应为400px，最大宽度应为300px。如果两个元素的高度应大于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

Answer 1

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

.element1

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;
}