div에서 CSS 속성 '오버플로: 스크롤'을 사용할 때 전체 스크롤 텍스트 범위를 보장하는 방법

Question

저는 프로그래밍이 처음이고 현재 HTML/CSS 및 JS를 사용하여 간단한 한 페이지짜리 웹사이트를 만들려고 노력하고 있습니다. 텍스트를 작성하는 'general_container'라는 CSS 클래스가 있습니다. 이 클래스는 CSS에서도 'div_text'로 정의됩니다(둘 모두에 대한 코드는 아래에 제공됨).

.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;

    위치: 상대;
}

텍스트가 포함된 div에 비해 큰 경우 문제가 발생합니다. 위에서 정의한 글꼴 크기를 사용하면 기본 해상도(2560x1440)에서 텍스트가 숨겨지고 스크롤 막대를 통해 액세스할 수 있습니다. 그러나 스크롤바 상단에는 아래 이미지와 같이 텍스트의 시작 부분이 표시되지 않습니다(일반 자리 표시자 텍스트를 사용했습니다).

동적 글꼴 크기와 div 크기에 대한 제약 조건이 이 동작의 원인인 것 같은데 해결 방법을 모르겠습니다.

스크롤 막대를 통해 액세스할 수 없는 텍스트가 포함된 이미지

div의 제약 조건과 오버플로 속성을 수정하려고 시도했지만 공식 Mozilla webdev 가이드에서 읽은 내용에 따르면 Overflow-y:scroll(이 경우 자동으로 스크롤하도록 설정됨)을 사용하면 원하는 작업을 수행할 수 있습니다. 더 많은 텍스트를 추가하면 최대 높이를 늘리면 동일한 문제가 발생합니다.

Answer 1

align-items:center; 규칙을 제거하세요.

Answer 2

스크롤 막대가 위에서 시작하여 전체 텍스트 내용을 덮도록 하려면 다음과 같이 변경하세요. .general_container中删除justify-content: center;에서. .general_container中删除height: fit-content;和width: fit-content;에서. 높이를 제한합니다. .general_container设置一个特定的max-height

예

으아악