我是编程新手，目前正在尝试使用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会导致相同的问题。