Question 230150 in Html Question posted in
Some basic documentation can be found here.

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.

Tags:

2

Answers


  1. 0

    To ensure that the scrollbar starts from the top and covers the entire text content, make these 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 {
    /* ...other properties... */

    /* Remove justify-content: center; */
    /* Remove height and width fit-content */
    
    max-height: 600px; /* Adjust as needed */
    
    /* ...other properties... */

    overflow-x: hidden;
    overflow-y: auto;
}
    Login or Signup to reply.
  2. 0

    Remove align-items:center; rule.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search