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