As a beginner in programming, I am currently working on creating a simple one-page website using HTML/CSS and JS. I have a CSS class called 'general_container' that I use to style the text inside, with another class defined as 'div_text'. Below is the code for both classes:
.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 issue arises when the text becomes too large compared to the enclosing div: with the specified font size and my native resolution of 2560x1440, the text gets cut off and requires a scroll bar for access. However, the top of the scrollbar does not show the beginning of the text, as illustrated in the image below (placeholder text used).
I suspect that the dynamic font size and the restrictions on the div's dimensions are causing this problem, but I'm unsure how to address it.
View image where text is inaccessible via scrollbar
I've attempted adjustments to both the div's constraints and the overflow property. According to the official Mozilla webdev guide, setting overflow-y to scroll (auto defaults to scroll) resolves the issue as desired. Increasing the max-height would lead to similar problems if more text were added.