在IE11中规范化Flexbox溢出

Question

在每个Chrome和IE11中查看下面的代码示例。在Chrome中，<main>背景停在.container元素的边缘，这是所需的。在IE中它溢出.container元素：

我在寻找什么：

1. 我希望IE将<main>元素结尾放在.container元素的边缘

2. 在.container2的情况下，它正确显示：<main>元素应该只占用所需的高度。

＆＃13;
＆＃13;
.container {
  height:400px;
  background:#333;
  display:flex;
  flex-direction:column;
  width:40%;
  position:absolute;
}

.container2 {
  left:50%;
}
header {
    color:white;
}
main {
  background:#ccc;
  width:30%;
  display:flex;
  flex-direction:column;
}
＆＃13;
<div class="container">
  <header>This is good in Chrome but bad in IE</header>
  <main>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </main>
</div>

<div class="container container2">
  <header>This is good in both browsers</header>
  <main>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </main>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

flex在某些情况下限制弹性儿童的身高时，有一些非常糟糕的行为（错误，缺陷，缺点或者什么都称之为）。

使用position: absolute对我来说已经很多次了，设置在内部div上，就像这样。

经过Chrome，IE11，Edge，FF的测试，全部正常工作。

.container {
  height: 400px;
  background: #333; display: flex;
  flex-direction: column;
  width: 40%; position: absolute;
}
.container2 { left:50%; }
header {
  color:white;
}
main {
  flex: 1;
  width: 30%;
  position: relative;
}
.inner {
  position: absolute;
  background:#ccc;
  left: 0;
  top: 0;
  right: 0;
  height: auto;
  max-height: 100%;
}

<div class="container">
  <header>This is good in Chrome but bad in IE</header>
  <main>
    <div class="inner">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
    </div>
  </main>
</div>

<div class="container container2">
  <header>This is good in both browsers</header>
  <main>
    <div class="inner">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
    </div>
  </main>
</div>

Answer 2

将主要最大高度设置为100％应该可以做到这一点。但是，由于某些原因，IE无法处理这是高度属性丢失。

这不是一个真正的答案，因为现在第二个例子是错误的...但我会留在这里，以防它可以帮助别人找到解决方案

.container {
  height:400px;
  background:#333;
  display:flex;
  flex-direction:column;
  width:40%;
  position:absolute;
}

.container2 {
  left:50%;
}
header {
    color:white;
}
main {
  background:#ccc;
  width:30%;
  display:flex;
  flex-direction:column;
  height: 100%;
  max-height: 100%;
}

<div class="container">
  <header>This is good in Chrome but bad in IE</header>
  <main>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </main>
</div>

<div class="container container2">
  <header>This is good in both browsers</header>
  <main>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </main>
</div>