[CSS] 가변 레이아웃 안에서 스크롤바 적용

부모 div 가 아래와 같이 스타일이 적용되어 있어 브라우져 크기에 맞게 채워지는 가변 형태일때

style="display:flex; flex-direction:column; height:100%;"

스크롤 처리할 div 를 position:relative 로  감싼 후 그 안에 스크롤될 내용 영역 div 를 추가하여 내용을 작성하면 가변 크기의 div 임에도 내용이 영역을 초과할 경우 스크롤이 적용된다.

<style>
    #logView {
        width:100%;
        height:100%;
        background:#000000;
        color:#00ff00;
        font-family: "Courier New";
        overflow-y:scroll;
        overflow-x:hidden;
        position:absolute;
        font-size: 14px;
    }
</style>

<div style="display:flex; flex-direction:column; height:100%;">
	<div style="position:relative; height:100%; width:100%;">
    	<div id="logView" class="container-fluid p-3">
        스크롤될 내용1
        스크롤될 내용2
        스크롤될 내용3
        스크롤될 내용4
        ...
        </div>
	</div>
</div>