HTML/CSS - Прокручиваемый раздел не подходит для страницы.

Question

У меня есть веб-приложение, которое я не разработал сам, но мне поручено очистить несколько вещей, которые больше не работают.

Существует одна проблема, по которой я не могу понять, почему это происходит.

Веб-приложение разбито на две панели. Однако вторая панель, которая прокручивается, не доходит до нижней части страницы, когда пользователь прокручивает весь путь вниз.

Также с помощью масштабирования (ctrl -) мы получаем пустую область внизу, хотя панель может продолжать прокрутку.

Id нравится иметь эту панель, прокручивать, как если бы это была полная страница.

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/