Обходное решение для выравнивания переполнения IE 10/11 для гибких линий

Question

Если контейнер flex имеет оправданный контент: центр, и существует один гибкий ребенок, который шире, чем контейнер, содержимое остается центрированным (при этом содержимое переполняется одинаково в обоих направлениях) во всех браузерах, кроме IE10 и IE11.

В большинстве браузера вы получите это:

В IE 10/11 вы получите это:

Мне нужен способ для достижения центрированную макета в тех IE браузеров, не отрываясь от подхода flexbox полностью. Я открыт для CSS hack IE обходных решений, если это необходимо.

Вот скрипку на примере:

.wrap { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.layer { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid blue; 
 
} 
 

 
.layer-inner { 
 
    font-size: 20px; 
 
    width: auto; 
 
    white-space: nowrap; 
 
    line-height: 1em; 
 
}

<div class="wrap"> 
 
    <div class="layer"> 
 
    <span class="layer-inner"> 
 
     This overlowing text should be centered 
 
    </span> 
 
    </div> 
 
</div>

Answer 1

Я понял это. В IE 10/11 «justify-content» и «align-items» ведут себя по-разному. Если дочерний объект больше контейнера вдоль оси обоснования, тогда IE 10/11 будет использовать поведение «justify-content: flex-start». Если ребенок больше, чем контейнер вдоль оси «выравнивание», то содержимое будет правильно выровнено в соответствии со значением «align-items», даже если ребенок переполнит контейнер.

Мое решение было просто добавить "Flex-направление: колонка" в поле ниже фрагменте кода:

.wrap { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.layer { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid blue; 
 
} 
 

 
.layer-inner { 
 
    font-size: 20px; 
 
    width: auto; 
 
    white-space: nowrap; 
 
    line-height: 1em; 
 
}

<div class="wrap"> 
 
    <div class="layer"> 
 
    <span class="layer-inner"> 
 
     This overlowing text should be centered 
 
    </span> 
 
    </div> 
 
</div>