So stellen Sie die vollständige Abdeckung des Lauftexts sicher, wenn Sie die CSS-Eigenschaft „Overflow: scroll' für ein Div verwenden

Question

Ich bin neu in der Programmierung und versuche derzeit, eine einfache einseitige Website mit HTML/CSS und JS zu erstellen. Ich habe eine CSS-Klasse namens „general_container“, in die ich Text schreibe, der in CSS auch als „div_text“ definiert ist (Code für beide wird unten bereitgestellt):

.general_container{

    Rand: min(1vw,1vh) min(1vw,1vh);
    Anzeige: Flex;

    Höhe: fit-content;
    Breite: fit-content;

    maximale Breite: 100 %;
    maximale Höhe: 80 Vh;

    Position: relativ;

    Polsterung: min(1vw,1vh);

    Randfarbe: #232323;
    Randstil: solide;
    Randbreite: 0,2rem;
    Randradius: 1rem;

    align-items: center;
    justify-content:center;

    Überlauf-x: versteckt;
    Überlauf-y: auto;
}


.div_text {
    Schriftgröße: calc(12px + 1,5vw);

    Farbe: #F2F2F2;

    Position: relativ;
}

Das Problem tritt auf, wenn der Text im Vergleich zu dem Div, in dem er sich befindet, groß ist: Bei Verwendung der oben definierten Schriftgröße ist der Text in meiner nativen Auflösung (2560 x 1440) ausgeblendet und über die Bildlaufleiste zugänglich. Allerdings wird oben in der Bildlaufleiste nicht der Anfang des Textes angezeigt, wie im Bild unten gezeigt (ich habe einen generischen Platzhaltertext verwendet).

Ich vermute, dass dynamische Schriftgrößen und Einschränkungen bei Div-Größen die Ursache für dieses Verhalten sind, aber ich weiß nicht, wie ich es beheben kann.

Bild mit Text, auf den über die Bildlaufleiste nicht zugegriffen werden kann

Ich habe versucht, die Einschränkungen und Überlaufeigenschaften des Div zu ändern, aber nach dem, was ich im offiziellen Mozilla-Webdev-Handbuch gelesen habe, führt die Verwendung von overflow-y: scroll (in diesem Fall standardmäßig zum Scrollen) dazu, dass es funktioniert, was ich möchte. Wenn Sie mehr Text hinzufügen, führt eine Erhöhung der maximalen Höhe zum gleichen Problem.

Answer 1

移除 align-items:center; 规则。

Answer 2

为了确保滚动条从顶部开始并覆盖整个文本内容，请进行以下更改： 从.general_container中删除justify-content: center;。 从.general_container中删除height: fit-content;和width: fit-content;。 为.general_container设置一个特定的max-height来限制其高度。

示例

.general_container {
    /* ...其他属性... */

    /* 删除 justify-content: center; */
    /* 删除 height 和 width fit-content */
    
    max-height: 600px; /* 根据需要进行调整 */
    
    /* ...其他属性... */

    overflow-x: hidden;
    overflow-y: auto;
}