flexboxについて、chromeで同様のコードを確認した際には意図通りの表示となりますが、
IE11で確認時、flexboxの幅が保持されず、潰れたような表示となってしまいます。
widthをcalcではなく固定値(この場合計算の結果である190px)等にすると意図通りに表示されます。
calcのネストについても他箇所では問題がないため、原因が不明な状況です。
よろしくお願いします。
コード
html
1<div class="block"> 2 <ul class="list"> 3 <li>test</li> 4 <li>test</li> 5 <li>test</li> 6 <li>test</li> 7 <li>test</li> 8 <li>test</li> 9 </ul> 10</div>
scss
1.list { 2 display: flex; 3 flex-wrap: wrap; 4 list-style: none; 5 padding: 0; 6 justify-content: space-between; 7 8 li { 9 background-color: #ccc; 10 box-sizing: border-box; 11 padding: 10px 0; 12 text-align: center; 13 width: calc(calc(100% - 30px)/3); 14 } 15} 16 17.block { 18 background-color: #000; 19 margin: auto; 20 max-width: 600px; 21}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/29 07:28 編集
退会済みユーザー
2017/09/29 08:29