HTML/CSS: 'Overflow: scroll' applied on a 'div' does not cover whole text

I am new to programming and I am currently trying to make a simple one page website using HTML/CSS and JS. I have a ‘general_container’ CSS class which I use to write text inside, whose class is also defined in css as ‘div_text’ (both of them provided below):

.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;
}

The problem appears when the text is too large compared to the div it is encased in: using the font-size defined above, on my native resolution (2560×1440), it results in my text being hidden from overflow and accessible through a scroll bar. However, the top of the scrollbar does not show the start of the text, as can be seen in the image below (I used the general placeholder text).

My guess is that the dynamic font size and the constraints regarding the div’s size are the cause of this behavior, but I do not know how to fix it.

Image of text not being accesible by scrollbar

I tried modifying both the constraints of the div and the overflow property, but, from reading on the official Mozilla webdev guide, using overflow-y: scroll (auto in this case defaults to scroll) it behaves as I would want it to. Increasing the max-height would result in the same thing, if more text was added.