フレックスボックスの子オーバーフロー親IEで指定された最大高さ

Question

フレックスボックスを使用して重ねて表示される2つの子要素を含む親要素があります。この親要素には、max-heightプロパティがある値に設定されています。したがって、コンテンツが短い限り、親要素は小さくとどまり、内容が大きくなると親要素はその最大高さに達するまで子要素が大きくなります。この時点で、コンテンツ要素のスクロールバーが表示されます。

#container { 
 
    display: flex; 
 
    max-width: 80vw; 
 
    max-height: 100px; 
 
    flex-direction: column; 
 
} 
 

 
#content { 
 
    overflow-y: auto; 
 
} 
 

 
/* styling - ignore */ 
 
#container { 
 
    border: 2px solid black; 
 
    margin-bottom: 1em; 
 
} 
 
#header { 
 
    background-color: rgb(245, 245, 245); 
 
    padding: 10px; 
 
} 
 
#content { 
 
    background-color: rgb(255, 255, 255); 
 
    padding: 0 10px; 
 
}

<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Everything works as supposed to, move along</p> 
 
    </div> 
 
</div> 
 

 
<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    </div> 
 
</div>

これは、FirefoxとChromeで完璧に動作します。 Internet Explorerでは、content要素のスクロールバーは表示されませんが、その代わりに、content要素は親要素からオーバーフローします。

私はフレックスベースや他のフレックスボックスの属性で遊んでみました。

Answer 1

試行の高さ：最大高さの代わりに100ピクセル、100ピクセル、 #containerに、すなわち：

#container { 
    display: flex; 
    max-width: 80vw; 
    height: 100px; 
    flex-direction: column; 
} 

#container { 
 
    display: flex; 
 
    max-width: 80vw; 
 
    height: 100px; 
 
    flex-direction: column; 
 
} 
 

 
#content { 
 
    overflow-y: auto; 
 
} 
 

 
/* styling - ignore */ 
 
#container { 
 
    border: 2px solid black; 
 
    margin-bottom: 1em; 
 
} 
 
#header { 
 
    background-color: rgb(245, 245, 245); 
 
    padding: 10px; 
 
} 
 
#content { 
 
    background-color: rgb(255, 255, 255); 
 
    padding: 0 10px; 
 
}

<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Everything works as supposed to, move along</p> 
 
    </div> 
 
</div> 
 

 
<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    </div> 
 
</div>