IE 10/11フレックスチャイルドオーバーフローアラインメントの回避策

Question

フレックスコンテナにjustify-content：centerがあり、コンテナよりも広い1つのフレックスチャイルドがある場合、コンテンツは中央に残ります（コンテンツは両方向に均等にオーバーフローします） IE10とIE11を除くすべてのブラウザで）。私はそれらのIEで中心のレイアウトを達成するための方法が必要です

：あなたがこれを取得IE 10/11で

：あなたがこれを取得するほとんどのブラウザで

フレックスボックスアプローチを完全に廃止することなく私は必要に応じてCSSのハック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」軸に沿ってコンテナよりも子が大きい場合でも、子がコンテナをオーバーフローさせた場合でも、コンテンツは「align-items」の値に従って適切に揃えられます。下記のスニペットに：

私のソリューションは、 "列フレックス方向"：追加するだけだったcenter`：

.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>