フレックス：Chromeは問題ありません.FirefoxとEdgeは完全にスクロールしません。

Question

私は3つの列flexboxレイアウトを持っています。最初の列はフィルタ付きの項目のリストで、2列目は長い本文です第3の列は無限にスクロールするリストである。 Chromeでは、左側のリストが期待どおりに動作します。下にスクロールし、info段落を表示します。しかし、FirefoxとEdgeでは、リストはの下にスクロールしません。ページの一番下が切り取られます。

<div class="container"> 
    <div class="left-sidebar"> 
    <div class="filter-wrap">...</div> 
    <div class="list-wrap"> 
     <ul class="list">...</ul> 
     <p class="info">...</p> 
    </div> 
    </div> 
    <div class="main-content">...</div> 
    <div class="right-sidebar">...</div> 
</div> 

そして左側に関するCSS：ここ

は、マークアップだ

問題が実際に悪い高さのチェーンアップ ずっと高かったように見えます

.container { 
    display: flex; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

.left-sidebar { 
    display: flex; 
    flex-grow: 1; 
    flex-basis: 0px; 
    flex-direction: column; 
    overflow-y: hidden; 
} 

.filter-wrap { 
    position: relative; 
    padding: 20px 20px 0 20px; 
} 

.list-wrap { 
    font-size: 14px; 
    flex-grow: 1; 
    flex-basis: 0px; 
    overflow-y: auto; 
    padding: 15px 20px 15px 20px; 
} 

.list-wrap ul { word-break: break-all; } 
.info { 
    cursor: pointer; 
    background: none; 
} 

Answer 1

私は正しい場所を見ていませんでした。