Internet Explorer 11: дочерние элементы с плавающими элементами внутри имеют много пустого пространства, когда содержатся в вертикальном элементе flexbox

Question

Я пытаюсь исправить странное поведение (в IE11 ) вертикальных дочерних элементов контейнера flexbox, которые слишком сильно растягиваются, оставляя много пустого пространства, когда они содержат плавающие элементы.

Вы также можете увидеть это по адресу: https://kinderhotel.info

До сих пор я пытался удалить order: 6; на .content-5, устанавливая различные значенияflex-grow\-shrink\-basis, height. Я также переместился на .content-5-inside вверх на один уровень в DOM, а затем у этого элемента было много пустого пространства внизу. Наконец, когда я выключил float в div, не было лишних пробелов.

Он отлично работает в современных браузерах.

<div class="home-page">
  <div class="content-5">
   <div class="content-5-inside">
     <div class="float-left">...</div>
     <div class="float-left">...</div>
     <div class="float-right">...</div>
   </div>
  </div>
</div>

.home-page {
  display: flex;
  flex-direction: column;
}

.content-5 {
  order: 6;
}

.content-5-inside::before, .content-5-inside::after  {
  content: "";
  display: table;
}
.content-5-inside::after  {
  clear: both;
}

Я не могу использовать любой контентуправление правилами, такими как flexbox внутри блока .content-5-inside, поскольку все, что находится внутри, предоставляется конечными пользователями и может быть или не размещено. Но мне нужно всякий раз, когда пользователь помещает плавающий контент внутрь, чтобы внизу не было пробелов.