div에서 CSS 속성 '오버플로: 스크롤'을 사용할 때 전체 스크롤 텍스트 범위를 보장하는 방법
<p>저는 프로그래밍이 처음이고 현재 HTML/CSS 및 JS를 사용하여 간단한 한 페이지짜리 웹사이트를 만들려고 노력하고 있습니다. 텍스트를 작성하는 'general_container'라는 CSS 클래스가 있습니다. 이 클래스는 CSS에서도 'div_text'로 정의됩니다(둘 모두에 대한 코드는 아래에 제공됨). </p>
<pre class="brush:php;toolbar:false;">.general_container{
마진: min(1vw,1vh) min(1vw,1vh);
디스플레이: 플렉스;
높이: 적합 콘텐츠;
너비: 내용에 맞게;
최대 너비: 100%;
최대 높이: 80vh;
위치: 상대;
패딩: min(1vw,1vh);
테두리 색상: #232323;
테두리 스타일: 단색;
테두리 너비: 0.2rem;
국경 반경: 1rem;
항목 정렬: 중앙;
내용 정당화:중심;
오버플로-x: 숨김;
오버플로-y: 자동;
}
.div_text {
글꼴 크기: calc(12px + 1.5vw);
색상: #F2F2F2;
위치: 상대;
}</pre>
<p>텍스트가 포함된 div에 비해 큰 경우 문제가 발생합니다. 위에서 정의한 글꼴 크기를 사용하면 기본 해상도(2560x1440)에서 텍스트가 숨겨지고 스크롤 막대를 통해 액세스할 수 있습니다. 그러나 스크롤바 상단에는 아래 이미지와 같이 텍스트의 시작 부분이 표시되지 않습니다(일반 자리 표시자 텍스트를 사용했습니다). </p>
<p>동적 글꼴 크기와 div 크기에 대한 제약 조건이 이 동작의 원인인 것 같은데 해결 방법을 모르겠습니다. </p>
<p>스크롤 막대를 통해 액세스할 수 없는 텍스트가 포함된 이미지</p>
<p> div의 제약 조건과 오버플로 속성을 수정하려고 시도했지만 공식 Mozilla webdev 가이드에서 읽은 내용에 따르면 Overflow-y:scroll(이 경우 자동으로 스크롤하도록 설정됨)을 사용하면 원하는 작업을 수행할 수 있습니다. 더 많은 텍스트를 추가하면 최대 높이를 늘리면 동일한 문제가 발생합니다. </p>
