Bagaimana untuk memastikan liputan teks tatal penuh apabila menggunakan sifat CSS 'Limpahan: tatal' pada div

Question

Saya baru dalam pengaturcaraan dan sedang cuba membuat tapak web satu halaman yang mudah menggunakan HTML/CSS dan JS. Saya mempunyai kelas CSS yang dipanggil 'general_container' di mana saya menulis teks, yang juga ditakrifkan dalam CSS sebagai 'div_text' (kod untuk kedua-duanya disediakan di bawah):

.general_container{

    jidar: min(1vw,1vh) min(1vw,1vh);
    paparan: flex;

    ketinggian: muat-kandungan;
    lebar: muat-kandungan;

    lebar maksimum: 100%;
    ketinggian maksimum: 80vj;

    kedudukan: relatif;

    padding: min(1vw,1vh);

    warna sempadan: #232323;
    gaya sempadan: pepejal;
    lebar sempadan: 0.2rem;
    jejari sempadan: 1rem;

    align-item: tengah;
    justify-content:center;

    limpahan-x: tersembunyi;
    limpahan-y: auto;
}


.div_text {
    saiz fon: calc(12px + 1.5vw);

    warna: #F2F2F2;

    kedudukan: relatif;
}

Masalah timbul apabila teks adalah besar berbanding dengan div di dalamnya: menggunakan saiz fon yang ditakrifkan di atas, pada resolusi asli saya (2560x1440) teks tersembunyi dan boleh diakses melalui bar skrol. Walau bagaimanapun, bahagian atas bar skrol tidak menunjukkan permulaan teks seperti yang ditunjukkan dalam imej di bawah (saya menggunakan teks pemegang tempat generik).

Saya rasa saiz fon dinamik dan kekangan pada saiz div adalah punca kelakuan ini, tetapi saya tidak tahu bagaimana untuk membetulkannya.

Imej dengan teks tidak boleh diakses melalui bar skrol

Saya cuba mengubah suai kekangan div dan sifat limpahan, tetapi daripada apa yang saya baca pada panduan webdev Mozilla rasmi, menggunakan limpahan-y: tatal (auto lalai untuk tatal dalam kes ini) melakukan apa yang saya mahu ia lakukan. Jika anda menambah lebih banyak teks, meningkatkan ketinggian maks akan menyebabkan masalah yang sama.

Answer 1

Alih keluar peraturan align-item:center;.

Answer 2

Untuk memastikan bar skrol bermula di bahagian atas dan meliputi keseluruhan kandungan teks, buat perubahan berikut: Daripada .general_container中删除justify-content: center;. Daripada .general_container中删除height: fit-content;和width: fit-content;. Untuk mengehadkan ketinggiannya. .general_container设置一个特定的max-height

Contoh

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

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

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