Элемент Flex перекрывает другой элемент в IE11

Question

У меня есть два деления:

1. top div содержит длинный текст, занимающий несколько строк
2. нижний div имеет min-height а также flex-grow: 1

Когда я уменьшил окно до появившейся прокрутки, то в chrome все отображается правильно. Но в IE11 верхний div сокращен до одной строки, а его текст находится сверху нижнего div.

Я могу исправить это только с помощью установки некоторой ширины для содержимого верхнего div (он работает с фиксированной шириной или шириной калькуляции, но не работает с процентной шириной) Как я могу это исправить без установки ширины или с использованием процентной ширины (width:100%)?

body,
html {
  height: 99%;
  padding: 0;
  margin: 0;
}

.flexcontainer {
  width: 25%;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid lime;
}

.allspace {
  flex-grow: 1;
  min-height: 300px;
  background-color: yellow;
}

.longtext {
  background-color: red;
}

.textcontainer {
  border: 1px solid magenta;
  /*IE work correctly only when specified width. by example: width:calc(25vw - 2px);*/
}

<div class="flexcontainer">
  <div class="longtext">
    section 1 with long name section 1 with long name section 1 with long name
  </div>
  <div class="allspace">
    all space
  </div>
</div>

jsfiddle: https://jsfiddle.net/tkuu28gs/14/

Хром:

IE11:

Answer 1

IE11 полон гибких ошибок и несоответствий с другими браузерами.

В этом случае источником проблемы является flex-shrink,

IE11 странно отображает flex-элементы после применения flex-shrink: 1 (настройка по умолчанию), что приводит к тому, что нижний элемент перекрывается с его родным элементом выше. Эта проблема не возникает в других основных браузерах.

Решение состоит в том, чтобы отключить flex-shrink, Это исправляет проблему в IE11, ничего не меняя в других браузерах.

Добавьте это к своему коду:

.longtext {
    flex-shrink: 0;
}

пересмотренная скрипка

Answer 2

Использование flex-shrink: 0;упомянутый в принятом ответе, работает для предотвращения дублирования. Тем не менее, я использую как flex: 0 1 15%поскольку я намерен разрешить сжатие, и это хорошо отображается в других браузерах, таких как MS Edge, Chrome и Firefox, но не в IE 11.

Чтобы применить без усадки ( flex-shrink: 0) только для IE 11, вместо этого я использовал следующее в качестве -ms-зависит от поставщика:

      -ms-flex-negative: 0 !important;

Answer 3

Задача решена:

  body, html {
    height: 100vh;
    padding:0;
    margin:0;
}
.flexcontainer{
  width:25%;
  display: flex;
height: 100%;
  flex-flow: column;
  border: 1px solid lime;
}
.allspace{
  flex-grow:1;
  background-color: yellow;
}
.longtext{
  background-color: red;
  //EDIT
  flex-grow: 0;
  min-height: 100px;
}
.textcontainer{
  border:1px solid magenta;
  /*IE work correctly only when specified width. by example: width:calc(25vw - 2px);*/
}

РЕДАКТИРОВАТЬ (скриншоты на IE11)