如何在一个div上使用CSS属性'Overflow: scroll'时确保完整滚动文本的覆盖范围

Question

我是编程新手，目前正在尝试使用HTML/CSS和JS制作一个简单的单页网站。我有一个名为'general_container'的CSS类，我在其中写入文本，该类在CSS中也定义为'div_text'（下面提供了两者的代码）：

.general_container{

    margin:         min(1vw,1vh) min(1vw,1vh);
    display:        flex;

    height:         fit-content;
    width:          fit-content;

    max-width:      100%;
    max-height:     80vh;

    position:       relative;

    padding:        min(1vw,1vh);

    border-color:   #232323;
    border-style:   solid;
    border-width:   0.2rem;
    border-radius:  1rem;

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

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


.div_text {
    font-size:  calc(12px + 1.5vw);

    color:      #F2F2F2;

    position:   relative;
}

当文本与其所在的div相比较大时，问题就出现了：使用上面定义的字体大小，在我的本机分辨率（2560x1440）上，文本会被隐藏并通过滚动条访问。然而，滚动条的顶部不显示文本的开头，如下图所示（我使用了通用的占位文本）。

我猜测动态字体大小和对div大小的约束是这种行为的原因，但我不知道如何解决它。

文本不可通过滚动条访问的图像

我尝试修改div的约束和overflow属性，但是根据我在官方Mozilla webdev指南上的阅读，使用overflow-y: scroll（在这种情况下，auto默认为scroll）会按照我希望的方式工作。如果添加更多文本，增加max-height会导致相同的问题。

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