Вложенный flexbox w/overflow не работает в IE10 +

У меня есть элемент пользовательского интерфейса в моем веб-приложении, который функционирует как панель зависания. Сама панель имеет элемент заголовка, нижнего колонтитула и содержимого. Панель будет иметь максимальную высоту, чтобы избежать переполнения панели из окна (это обновляется в событии window.onresize).

Поскольку мне требуется только поддержка IE10 и выше, я использую flexbox для поддержки этого макета.

Мне удалось получить этот рабочий кросс-браузер: http://jsfiddle.net/Pyn9e/9/

Попробуйте уменьшить размер панели "Результат", и вы увидите, что панель содержимого начинает прокручивать, а не переполнять, но все равно гарантирует, что верхний и нижний колонтитулы не исчезнут.

function setMaxHeight() {
  var maxHeight = $(window).height() - 16;
  $("#panel").css({
    height: maxHeight + "px"
  });
}

$(window).on("resize", function() {
  setMaxHeight();
});
setMaxHeight();

var i = 0;

setInterval(function() {
  var ul = $("#list");
  ++i;
  if (i <= 20) {
    var li = $("<li>").text("Item " + i);
    ul.append(li);
  } else if (i <= 40) {
    ul.children().last().remove();
  } else {
    i = 0;
  }
}, 60);
.flex-container {
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
}

.flex-fixed {
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
}

.flex-var {
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
}

#panel {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 200px;
  color: white;
  overflow: hidden;
}

#panel > header {
  background: red;
}

#panel > .content {
  background: blue;
  overflow-y: auto;
}

#panel > footer {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="panel" class="flex-container">
  <header class="flex-fixed">This is the header</header>
  <div class="flex-var content">
    <ul id="list">
    </ul>
  </div>
  <footer class="flex-fixed">This is the footer</footer>
</div>

Ответы

Ответ 1

Значение префикса IE должно быть -ms-flexbox, а не -ms-flex

В обоих примерах вы используете неправильное значение префикса браузера: -ms-flex.

Правильное flexbox префиксное значение для IE - -ms-flexbox.

Кроме того, вам не нужно использовать JavaScript для установки высоты контейнера при изменении размера окна; вы можете добиться того же результата, установив height of #panel в CSS:

#panel {
    …
    height: calc(100% - 16px);
    …
}

Или, потому что #panel абсолютно позиционируется, установив положение bottom:

#panel {
    …
    bottom: 8px;
    …
}


var i = 0;

setInterval(function() {
  var ul = $("#list");
  ++i;
  if (i <= 20) {
    var li = $("<li>").text("Item " + i);
    ul.append(li);
  } else if (i <= 40) {
    ul.children().last().remove();
  } else {
    i = 0;
  }
}, 60);
.flex-container {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
}

.flex-fixed {
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
}

.flex-var {
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
}

#panel {
  position: absolute;
  top: 8px;
  left: 8px;
  bottom: 8px;
  width: 200px;
  color: white;
  overflow: hidden;
}

#panel > header {
  background: red;
}

#panel > .content {
  background: blue;
  overflow-y: auto;
}

#panel > footer {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="panel" class="flex-container">
  <header class="flex-fixed">This is the header</header>
  <div class="flex-container flex-var content">
    <header class="flex-fixed">Content</header>
    <ul id="list" class="flex-var" style="overflow-y:scroll; padding: 0; margin:0">
    </ul>
  </div>
  <footer class="flex-fixed">This is the footer</footer>
</div>