Comment garantir une couverture complète du texte défilant lors de l'utilisation de la propriété CSS « Débordement : défilement » sur un div

Question

Je suis nouveau dans la programmation et j'essaie actuellement de créer un site Web simple d'une page en utilisant HTML/CSS et JS. J'ai une classe CSS appelée 'general_container' dans laquelle j'écris du texte, qui est également défini en CSS comme 'div_text' (le code pour les deux est fourni ci-dessous) :

.general_container{

    marge : min(1vw,1vh) min(1vw,1vh);
    affichage : flexible ;

    hauteur : contenu d'ajustement ;
    largeur : ajustement du contenu ;

    largeur maximale : 100 % ;
    hauteur maximale : 80vh ;

    position : relative ;

    remplissage : min(1vw,1vh) ;

    couleur de la bordure : #232323 ;
    style de bordure : solide ;
    largeur de bordure : 0,2 rem ;
    rayon de bordure : 1rem ;

    aligner les éléments : centre ;
    justifier-content:center;

    overflow-x : caché ;
    débordement-y : auto ;
}


.div_texte {
    taille de police : calc(12px + 1,5vw);

    couleur : #F2F2F2 ;

    position : relative ;
}
Le problème survient lorsque le texte est volumineux par rapport au div dans lequel il se trouve : en utilisant la taille de police définie ci-dessus, sur ma résolution native (2560x1440) le texte est masqué et accessible via la barre de défilement. Cependant, le haut de la barre de défilement n'affiche pas le début du texte comme le montre l'image ci-dessous (j'ai utilisé un texte d'espace réservé générique). 
Je suppose que les tailles de police dynamiques et les contraintes sur les tailles div sont la cause de ce comportement, mais je ne sais pas comment y remédier. 
Image avec texte non accessible via la barre de défilement
 J'ai essayé de modifier les contraintes et les propriétés de débordement du div, mais d'après ce que j'ai lu dans le guide officiel de Mozilla webdev, l'utilisation de overflow-y: scroll (la valeur par défaut est de faire défiler dans ce cas) fait ce que je veux qu'il fasse. Si vous ajoutez plus de texte, augmenter la hauteur maximale entraînera le même problème. 
            

Answer 1

Supprimez la règle align-items:center;.

Answer 2

Pour vous assurer que la barre de défilement commence en haut et couvre tout le contenu du texte, apportez les modifications suivantes : De .general_container中删除justify-content: center;. De .general_container中删除height: fit-content;和width: fit-content;. Pour limiter sa hauteur. .general_container设置一个特定的max-height

Exemple

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

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

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