为什么 IE11 会错误地渲染这个 Flexbox 布局？答案

【问题标题】：Why Is IE11 Rendering This Flexbox Layout Incorrectly?为什么 IE11 会错误地渲染这个 Flexbox 布局？
【发布时间】：2015-10-27 06:38:15
【问题描述】：

我有一个基于 flexbox 的布局，其中包含一个由标题和正文组成的居中容器。该容器有一个最小高度，以防止它在其正文中的内容很少时过度折叠。它还具有定义为其容器百分比的最大高度。

header 是固定高度，body 设置为overflow-y: auto。在 Chrome、Safari 和 Firefox 中，这意味着：

如果正文内容很少，则容器会折叠到其最小高度。
随着正文内容量的增加，正文（以及容器）会垂直扩展。
如果正文内容的增加意味着容器达到其最大高度，则触发正文的垂直滚动条。

但是在 IE11 中，如果正文内容的高度超出可用空间，它（有时）会超出容器的范围（调整窗口大小有时会触发此问题，有时会修复它）。

Codepen

我找不到任何提及会导致此问题的 IE 错误。

/* Box Sizing */

html {
  box-sizing: border-box;
}
  
*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Reset */

body,
html {
  width: 100%;
  height: 100%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Start propper */

.Wrapper {
  position: absolute;
  top: 30px;
  left: 30px;
  bottom: 30px;
  right: 30px;
  outline: 1px red solid;
  display: flex;
  align-items: center;
  min-height: 500px;
}

.Flexbox {
  min-width: 60%;
  display: flex;
  flex-direction: column;
  width: 600px;
  margin: 0 auto;
  max-height: 60%;
  outline: 1px blue solid;
}

.Flexbox >* {
  padding: 20px;
}

.Flexbox-header {
  flex: auto 0 80px;
  border-bottom: 1px solid green;
}

.Flexbox-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

<main class="Wrapper">
  <div class="Flexbox">
       <header class="Flexbox-header">HEADER</header>
       <div class="Flexbox-body">
         <ul>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
         </ul>
       </div>
  </div>
  
</main>

【问题讨论】：

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

【解决方案1】：

您似乎遇到了 IE 10-11 中的一个已知错误。基本上 flexbox 不能与 min-height 和 max-height 一起正常工作。

这是该问题的官方错误报告：

Min-height and flexbox (flex-direction:column) don't work together in IE 10 & 11-preview.

将max-height 替换为height 将使其按预期工作，但不太理想：

Codepen

【讨论】：