Question

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

以下是适用于Chrome，Firefox等的示例

我有一个绝对定位的flexbox，它有一个固定的标题，固定的页脚和填充体。 flexbox将占用所需的高度，但如果它达到最大高度，则身体将开始滚动。到目前为止，非常好。

但是，如果在IE10中打开链接，则无效。身体现在溢出而不是滚动，导致列表的底部和页脚都被隐藏。原因似乎是.lhs上的max-height CSS：

max-height: 200px;

如果将其更改为'height'：

height: 200px;

然后看，它再次起作用。然而，它也阻止了flexbox的高度可变，因此对我来说不是一个可行的解决方案。任何人都可以看到我如何在IE10以及其他支持flexbox的浏览器中使用它？

Answer 1

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

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

Answer 2

我在IE11上遇到了同样的问题并设法在没有任何修复的 CSS值的情况下解决了它。我将垂直flexbox嵌套在水平的中，并使用了t2：

＆＃13;

max-height: inherit

＆＃13;

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

＆＃13;

在Chrome 55，Firefox 47和IE 11上测试（没有IE10进行测试）

IE10中具有最大高度的flexbox

2 个答案: