<p>我是程式設計新手，目前正在嘗試使用HTML/CSS和JS製作一個簡單的單頁網站。我有一個名為'general_container'的CSS類，我在其中寫入文本，該類在CSS中也定義為'div_text'（下面提供了兩者的代碼）：</p> <pre class="brush:php;toolbar:false;">.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; }</pre> <p>當文字與其所在的div相比較大時，問題就出現了：使用上面定義的字體大小，在我的本機解析度（2560x1440）上，文字會被隱藏並透過捲軸存取。然而，捲軸的頂部不顯示文字的開頭，如下圖所示（我使用了通用的佔位文字）。 </p> <p>我猜測動態字體大小和對div大小的限制是這種行為的原因，但我不知道該如何解決它。 </p> <p>文字無法透過捲軸存取的圖片</p> <p>我嘗試修改div的約束和overflow屬性，但根據我在官方Mozilla webdev指南上的閱讀，使用overflow-y: scroll（在這種情況下，auto預設為scroll）會按照我希望的方式工作。如果添加更多文本，增加max-height會導致相同的問題。 </p>

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

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

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