如何在一個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;
}