Question

我有一个基于弹性箱的布局，涉及一个包含标题和正文的居中容器。容器的最小高度可以防止它在体内含有少量内容时坍塌太多。它还有一个max-height定义为其容器的百分比。

标题是固定高度，正文设置为overflow-y: auto。在Chrome，Safari和Firefox中，这意味着：

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

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

我找不到任何可能导致此问题的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>

Answer 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

为什么IE11渲染此Flexbox布局不正确？

1 个答案: