IE: Выпадение центровщика из контейнера

Очередной троллинг от Internet Explorer (во всех других браузерах, в т. ч. и Edge, всё отображается как надо). Так и не удалось воспроизвести проблему в JSFiddle (так IE прямо возьмёт и скажет, в чём он виноват), а код реального проекта довольно объёмный.

Условия задачи: .Wrapper, как блочный элемент, имеет ширину 100% от ширины окна, а .Centerer имеет заданные минимальную и максимальную ширины и отцентрирован с помощью margin: 0 auto. Внутри находится какое-то содержимое.

<div class="Wrapper">
  <div class="Centerer">
    <div class="Contains"></div>
    <div class="Contains"></div>
    <div class="Contains"></div>
    <div class="Contains"></div>
    <div class="Contains"></div>
    <div class="Contains"></div>
    <div class="Contains"></div>
  </div>
</div>
.Wrapper{
  background: rgba(red, 0.5); /* SASS */
}
.Centerer{
  min-width: 100px; 
  max-width: 300px;
  margin: 0 auto;
  padding: 5px 10px;
  background: rgba(orange, 0.5); /* SASS */
}
.Contains{
  width: 100px;
  height: 300px;
  background: rgba(yellow, 0.5); /* SASS */
}

Неудачная попытка воспроизвести проблему в JSFiddle здесь (всё отображается как надо).

Ниже представлен реальный проект с затёртым копирайтингом. В Chrome блок с голубым фоном заканчивается где нужно; высота обёртки wrapper (именно у неё голубой фон) равна высоте центровщика. В IE обёртка заканчивается раньше центровщика, а центровщик с содержимым идёт дальше, налезая на следующий, оранжевый блок. И при этом, сайт влючает в себя несколько аналогичных компоновок, но баг такой присходит не везде, из-за чего трудно установить причину.

Центровщик НЕ зафлочен.

Есть идеи, в чём дело?