html - 规范化 IE11 中的 Flexbox 溢出

Question

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

我在找什么:

1. 我希望 IE 有 <main>元素在 .container 元素的边缘结束

2. 对于 .container2，它显示正确:<main>元素应该只占据它需要的高度。

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

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

Answer 1

flex 在某些情况下限制 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>