Вертикальная компоновка IE11 с высотой: авто и переполнение не работает

Question

У меня есть два вертикальных поля, оба имеют height: auto, а второе необходимо прокрутить, если содержимое превышает максимальную высоту, определенную родителем.

.wrapper {
  position: fixed;
}

.popup {
  position: fixed;
  width: 200px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

.a {
  left: 0
}

.b {
  left: 200px;
}

.header {
  flex: 0 0 auto;
  border: 2px solid green;
}

.body {
  flex: 1 1 auto;
  overflow: auto;
}

<div class="wrapper">
  <div class="popup a">
    <div class="header">
      first popup
    </div>
    <div class="body">
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
      incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
      voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
    </div>
  </div>
  <div class="popup b">
    <div class="header">
      second <br> popup
    </div>
    <div class="body">
      "Sed ut perspiciatis unde omnis istiam, eaqcabo. Nemo enim ipsam voluptatem quia voluptas
    </div>
  </div>
</div>

Все отлично работает, кроме IE11, где контейнер в переполнении не прокручивается.

Каким образом я могу вести себя точно так же в IE11 и в современных браузерах?

PS: было бы решение, если бы я мог иметь определенную высоту для заголовка?

Answer 1

Flex-элементы в IE11 игнорируют max-height и min-height в контейнерах.

Ваш гибкий контейнер (.popup) установлен на max-height: 300px.

Гибкие элементы (header и body) не заботятся о них. Они игнорируют эту команду высоты.

Для иллюстрации этого поведения используйте height: 300px. Теперь это работает.

Решение # 1 : Если вы можете использовать height вместо max-height, ваша проблема решена. ( демо )

Кроме того, хотя эта проблема относится к гибким контейнерам, она не относится к гибким элементам. min-height и max-height соблюдаются для гибких элементов в IE11.

Таким образом, вы можете сделать .wrapper гибкий контейнер, который также превращает .popup flex контейнеры в гибкие элементы. Теперь max-height работает как задумано.

Этого будет достаточно для решения проблемы, если элементы .popup не используют фиксированное позиционирование. Элементы Flex, установленные на position: fixed, удаляются из обычного потока, включая удаление из макета Flex. Таким образом, элементы .popup больше не являются элементами сгибания.

Решение № 2: Если вы можете работать без фиксированного позиционирования на элементах .popup, тогда сделайте родительский контейнер гибким контейнером, и у вас все будет готово. ( демо )

---

Ссылки:

• IE11 min-height сообщение об ошибке (похоже, также относится к max-height)
• "Поскольку он находится вне потока, абсолютно позиционированный дочерний элемент гибкого контейнера не участвует в гибком макете."