Как я могу предотвратить сжатие элементов Flex в IE11, чтобы они были меньше их содержимого?

Question

Принимая следующую разметку: ( JSFiddle link )

.parent {
  width: 200px;
  border: 1px solid #ccc;
  height: 300px;
  display: flex;
  flex-direction: column;
}
.space-avail-sets-height {
  overflow: auto;
}

<div class="parent">
  <div class="content-sets-height">
    <h3>This part should be as tall as it needs to be to fit the content.</h3>
  </div>
  <div class="space-avail-sets-height">This part should take whatever height is remaining, and then use scrolling to view the content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsum, vel, tenetur aperiam dolores a cum laboriosam omnis sint cumque beatae quis doloribus, id veniam vitae. Explicabo, libero dicta consequatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsum, vel, tenetur aperiam dolores a cum laboriosam omnis sint cumque beatae quis doloribus, id veniam vitae. Explicabo, libero dicta consequatur.</div>
  <div class="content-sets-height">This part should be as tall as it needs to be to fit the content.</div>
</div>

Что можно сделать, чтобы IE11 правильно отображал элементы, высота которых зависит от их содержимого? (Не волнуйтесь, переполненный раздел здесь). Хотя любой другой браузер делает это правильно, наш старый друг IE выкладывает это на страницу:

Answer 1

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

.parent > div:first-child,
.parent > div:last-child {
  flex-shrink: 0;
}

IE11, по какой-либо причине, необходимо отключить flex-shrink. (Возможно, потому что min-height: auto является настройкой по умолчанию в браузерах, отличных от IE, что означает, что элементы не могут сжиматься ниже высоты их содержимого. Но в IE11 по умолчанию может быть min-height: 0. Но опять же,добавление min-height: auto в IE11 не решает проблему.)