IE10 中最大高度的 flexbox答案

【问题标题】：flexbox with max-height in IE10IE10 中最大高度的 flexbox
【发布时间】：2016-12-15 03:10:34
【问题描述】：

我正在尝试找到一种方法让我的 flexbox 在 IE10 中正常工作：

这是一个应该在 Chrome、Firefox 等中工作的示例。

我有一个绝对定位的 flexbox，它有一个固定的页眉、固定的页脚和填充体。 flexbox 将根据需要占用尽可能多的高度，但如果达到最大高度，则 body 将开始滚动。到目前为止，一切顺利。

但是，如果你在 IE10 中打开链接，它就不起作用了。正文现在溢出而不是滚动，导致列表底部和页脚都被隐藏。原因似乎是 .lhs 上的最大高度 CSS：

max-height: 200px;

如果将其更改为“高度”：

height: 200px;

然后你瞧，它又工作了。然而，它也阻止了 flexbox 的可变高度，所以对我来说不是一个可行的解决方案。谁能看到我如何在 IE10 以及其他支持 flexbox 的浏览器中完成这项工作？

【问题讨论】：

你试过更简单的方法吗：jsfiddle.net/vN65r/4
这在 IE10 中似乎也不起作用

标签： css internet-explorer-10 flexbox

【解决方案1】：

我看到的解决方案是将您的 max-height 设置为您的中间容器。您可以使用 calc() http://jsfiddle.net/vN65r/5/ 示例和最小的 CSS

.flex-container-v {
    display: flex;
    flex-direction: column;
    width:200px;
    background:gray;
}
.flex-fill {
    height:auto;
    overflow:auto;
    margin: 10px;   
    max-height:calc(200px - 60px);
}

【讨论】：

两个测试，一个溢出，另一个足够小jsfiddle.net/vN65r/6
这当然可行，但这意味着我必须计算我的“固定”元素的高度，这并不简单，因为容器的内容是动态的。那样，它似乎违背了使用 flexbox 为您处理这个问题的目的。
不要使用 calc() 并将 fair max-height 设置为 flex-fill。页眉和页脚是否恰好位于多行？ IE10 和 11 无法正常工作，您需要解决。
页眉和页脚可以是不同的高度。甚至可能有多个“固定”元素和一个可变 div。例如：jsfiddle.net/vN65r。我希望能够将内容放入此面板并使其工作而无需调整样式。
对于 ie，您需要在要查看滚动的元素上设置最大高度，否则，使用 javascript 检索高度并将适当的最大高度（或高度）应用于您的滚动元素。您必须处理这种差异 :) display:flex 对我们的浏览器来说是一个安静的新选项，它需要更加成熟一点:) 并且仍然需要一些后备

【解决方案2】：

我在 IE11 上遇到了同样的问题，并设法在没有任何固定 CSS 值的情况下解决了它。我将垂直弹性盒嵌套在水平弹性盒中，并使用max-height: inherit：

.flex-container-row { /* Added */
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;  
  display: flex;
}

.flex-container-v {
  width: 100%; /* Added */
  max-height: inherit; /* Added */
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-fill {
  -webkit-flex: 0 1 auto;
  -moz-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}
.flex-fixed {
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.lhs {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 300px;
  max-height: 200px;
  border: 1px solid red;
  overflow: hidden;
}
.list-container {
    overflow-y: scroll;
}

<div class="flex-container-row lhs">
<div class="flex-container-v">
    <header class="flex-fixed">Header</header>
    <div class="flex-fill list-container">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
    <footer class="flex-fixed">Footer</footer>
</div>
</div>

在 Chrome 55、Firefox 47 和 IE 11 上测试（没有要测试的 IE10）

【讨论】：