How to ensure full scrolling text coverage when using CSS property 'Overflow: scroll' on a div

Question

I am new to programming and currently trying to make a simple one-page website using HTML/CSS and JS. I have a CSS class called 'general_container' in which I write text, which is also defined in CSS as 'div_text' (code for both is 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 arises when the text is large compared to the div it is in: using the font size defined above, on my native resolution (2560x1440) the text is hidden and accessible via the scrollbar. However, the top of the scrollbar does not show the beginning of the text as shown in the image below (I used a generic placeholder text).

I'm guessing that dynamic font sizes and constraints on div sizes are the cause of this behavior, but I don't know how to fix it.

Image with text not accessible via scrollbar

I tried modifying the div's constraints and overflow properties, but from what I read on the official Mozilla webdev guide, using overflow-y: scroll (auto defaults to scroll in this case) does what I want it to do Work. If you add more text, increasing max-height will cause the same problem.

Answer 1

Remove the align-items:center; rule.

Answer 2

To ensure that the scrollbar starts at the top and covers the entire text content, make the following changes: Remove justify-content: center; from .general_container. Remove height: fit-content; and width: fit-content; from .general_container. Set a specific max-height for .general_container to limit its height.

Example

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

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

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