以下のような、よくあるボックス横並びのUIをコーディングしていて遭遇したのでメモ。
ul {
display: flex;
flex-wrap: wrap;
width: 960px;
margin: 0 20px;
}
li {
flex: 0 0 184px;
height: 40px;
padding: 10px;
box-sizing: border-box;
}
上記のコードでChromeでは1行5列のリストが表示されるが、
IE11ではbox-sizingが効かず、5列目が落ちてしまう。
これに対処する為には、以下のようにmax-width
をflex-basis
と同値で指定する必要がある。
ul {
display: flex;
flex-wrap: wrap;
width: 960px;
margin: 0 20px;
}
li {
flex: 0 0 184px;
max-width: 184px; /* ← これを追加 */
height: 40px;
padding: 10px;
box-sizing: border-box;
}
これでIE11でも正しく表示できる。