オーバーフロープロパティがIE 11で機能しない

Question

下のコードは、ほとんどのブラウザ（Chrome、Firefox、Safari、Edge）では正常に動作しますが、IE11では動作しません。

私は既知の問題についてはcaniuseで読んでいますが、IE11とoverflowについては何も言わないようです。これはIE 11のバグですか、何か不足していますか？

.container { 
 
    display: flex; 
 
    max-height: 100px; 
 
    flex-direction: column; 
 
    border: 1px solid red; 
 
} 
 
.header { 
 
    background: #eee; 
 
} 
 
.container > div { 
 
    flex: 0 0 auto; 
 
} 
 
.container > div.content { 
 
    flex: 0 1 auto; 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    <div class="header">Header without specific height. Always stays at top of .container, even if it is so long it uses up two lines.</div> 
 
    <div class="content"> 
 
    <div>Item no 1 in long list</div> 
 
    <div>Item no 2 in long list</div> 
 
    <div>Item no 3 in long list</div> 
 
    <div>Item no 4 in long list</div> 
 
    <div>Item no 5 in long list</div> 
 
    <div>Item no 6 in long list</div> 
 
    <div>Item no 7 in long list</div> 
 
    <div>Item no 8 in long list</div> 
 
    <div>Item no 9 in long list</div> 
 
    <div>Item no 10 in long list</div> 
 
    <div>Item no 11 in long list</div> 
 
    <div>Item no 12 in long list</div> 
 
    </div> 
 
</div>

Answer 1

あなたが述べたように、IE11はフレキシボックスをレンダリングする多くの問題を抱えています。この特定の問題に関する文書が見つからないという事実は、それがまだ文書化されていないことを意味します。しかし、それはバグのように見えます。幅または高さが宣言されない限り、overflow性の観点から

、IE11は関係なく、実際の値、の、overflow: visibleを適用します。

flex-basis: autoからflex-basis: 75px（単に例）に切り替えるだけで、スクロールバーの問題が修正されます。

固定高さがあなたが探しているものではないため、targeting styles for just IE11を試すことができます。

.container { 
 
    display: flex; 
 
    max-height: 100px; 
 
    flex-direction: column; 
 
    border: 1px solid red; 
 
} 
 
.header { 
 
    background: #eee; 
 
} 
 
.container > div { 
 
    flex: 0 0 auto; 
 
} 
 
.container > div.content { 
 
    flex: 0 1 75px;    /* adjusted */ 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    <div class="header">Header without specific height. Always stays at top of .container, 
 
         even if it is so long it uses up two lines.</div> 
 
    <div class="content"> 
 
    <div>Item no 1 in long list</div> 
 
    <div>Item no 2 in long list</div> 
 
    <div>Item no 3 in long list</div> 
 
    <div>Item no 4 in long list</div> 
 
    <div>Item no 5 in long list</div> 
 
    <div>Item no 6 in long list</div> 
 
    <div>Item no 7 in long list</div> 
 
    <div>Item no 8 in long list</div> 
 
    <div>Item no 9 in long list</div> 
 
    <div>Item no 10 in long list</div> 
 
    <div>Item no 11 in long list</div> 
 
    <div>Item no 12 in long list</div> 
 
    </div> 
 
</div>