HTML/CSS - 스크롤 가능한 섹션이 페이지에 맞지 않습니다.

Question

나는 웹 응용 프로그램을 가지고 있는데, 나는 스스로 개발하지 못했지만, 더 이상 작동하지 않는 몇 가지 정리 작업을 맡았다.

왜 그런 일이 발생하는지 알 수없는 한 가지 문제가 있습니다.

웹 응용 프로그램은 두 개의 패널로 나뉩니다. 그러나 스크롤 할 수있는 두 번째 패널은 사용자가 맨 아래로 스크롤 할 때 페이지 아래쪽에 도달하지 않습니다.

또한 축소 (ctrl -)하여 패널을 계속 스크롤 할 수 있지만 하단에 빈 영역이 생깁니다.

이 패널을 갖고 싶으면 마치 전체 페이지 인 것처럼 스크롤하십시오.

필자는 빠른 정적 복사본을 피들에 올려 놓았습니다.

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;*/ 
} 

필자는 전체 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/