HTML/CSS - スクロール可能なセクションがページに収まらない。

Question

私は自分で開発していないWebアプリケーションを持っていますが、もはや動作しないいくつかのものをクリーンアップすることを任されています。

私は本当になぜそれが起こっているのか把握できない1つの問題があります。

ウェブアプリケーションは2つのパネルに分割されています。ただし、スクロール可能な第2のパネルは、ユーザーが下方向にスクロールしたときに、ページの下部に到達しません。

また、（Ctrl - ）をズームアウトすると、パネルはスクロールを続けることができますが、下部に空白の領域が表示されます。

このパネルを持っているように、フルページのようにスクロールします。

Iveは簡単な静的なコピーをフィドルに置いています。

https://jsfiddle.net/brianz820/qmzw8923/

私は信じて問題になっている部分です。

<div id="house-estimates-scroll-panel"> 
    <div id="house-estimates-listing"></div> 
</div> 

div#house-estimates-scroll-panel { 
    position: relative; 
    /*display: inline-block;*/ 
    margin: 0; 
    padding: 0; 
    height: 1200px; 
    /*height: 100%;*/ 
    /*width: 100%;*/ 
    overflow-y: visible ; 
    overflow-x:hidden; 
    background-image: linear-gradient(to right, #f3f3f3 , #bbb); 
    background-size: 15px 20px; 
    background-position: right; 
    background-repeat: repeat-y; 

} 

div#house-estimates-listing { 
    margin: 0; 
    padding: 0; 
    height: 90000px; 
    /*width: 320px;*/ 
    /*width: 960px;*/ 
} 

Iveは完全なHTMLセクションとCSSセクションをフィディルドに追加しました。

Answer 1

あなたは（いくつかの理由は、特異性の問題の奇妙に見える）これらのルールを追加することによって、display:flex容器にラッパーを作ってみることができ

body { 
    height: 100%; 
} 

div#wrapper { 
    flex-direction: column; 
    height: 100%; 
    display:flex; 
    overflow: hidden; 
} 

div#house-estimates-panel { 
    display:flex; 
    overflow: hidden; 
} 

div#house-estimates-scroll-panel{ 
    height: auto; 
    flex: 1 auto; 
} 

div#house-estimates-listing { 
    height: auto; 
} 

デモ：https://jsfiddle.net/gw35wc4c/1/show/
ソース（私のCSSが一番下にある）：https://jsfiddle.net/gw35wc4c/1/