CODEWITHSUNDEEP
cssscrollbar
3142 maple
3142 maple

Reputation: 897

Overflow-y: auto scroll bar does not disappear after resizing window even when the content fits

Example HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Resize bug</title>
    </head>
    <body>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
        </style>
        <div style="display: flex; flex-direction: column; max-height: 100vh; width: 400px">
            <div style="background-color: aqua; min-height: 0; display: flex; flex-direction: column">
                <div>header</div>
                <div style="min-height: 0; overflow-y: auto; overflow-x: hidden">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis eu ex sed faucibus. Nulla
                    facilisi. Phasellus ac hendrerit libero. Pellentesque nec urna convallis leo aliquet maximus nec
                    quis erat. Vivamus id congue quam. Nullam fringilla eget nunc tincidunt faucibus. Etiam sit amet
                    arcu leo. Sed rutrum varius nibh, id vulputate massa laoreet eget. Sed pretium euismod neque et
                    fermentum. Etiam id orci varius, feugiat ligula sed, interdum est. Donec scelerisque imperdiet odio.
                    Quisque rutrum ut ligula sit amet tincidunt. Sed in dui tempus, malesuada massa eu, rutrum felis.
                    Suspendisse potenti. Cras viverra eros massa, vel vulputate sem tincidunt eget. Nulla ac finibus
                    metus, in tincidunt justo. Donec vehicula mi est, sit amet aliquet libero tincidunt rhoncus. Integer
                    malesuada accumsan elit sit amet pretium. Morbi malesuada viverra aliquam. Maecenas ultrices ex
                    ante, non tristique libero molestie sed. Aenean sed venenatis nunc. Maecenas a cursus dolor, ut
                    maximus diam. In sed lacus urna. Maecenas auctor posuere tempor. Phasellus velit nisl, venenatis
                    quis suscipit eu, sollicitudin at turpis. Vestibulum facilisis sodales ullamcorper. Mauris blandit
                    ligula pellentesque mauris rhoncus pellentesque at et quam.
                </div>
            </div>
            <div style="background-color: orange; margin-top: 0.25rem">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis eu ex sed faucibus. Nulla
                facilisi. Phasellus ac hendrerit libero. Pellentesque nec urna convallis leo aliquet maximus nec quis
                erat. Vivamus id congue quam. Nullam fringilla eget nunc tincidunt faucibus. Etiam sit amet arcu leo.
                Sed rutrum varius nibh, id vulputate massa laoreet eget. Sed pretium euismod neque et fermentum. Etiam
                id orci varius, feugiat ligula sed, interdum est. Donec scelerisque imperdiet odio. Quisque rutrum ut
                ligula sit amet tincidunt. Sed in dui tempus, malesuada massa eu, rutrum felis. Suspendisse potenti.
                Cras viverra eros massa, vel vulputate sem tincidunt eget. Nulla ac finibus metus, in tincidunt justo.
                Donec vehicula mi est, sit amet aliquet libero tincidunt rhoncus. Integer malesuada accumsan elit sit
                amet pretium. Morbi malesuada viverra aliquam. Maecenas ultrices ex ante, non tristique libero molestie
                sed. Aenean sed venenatis nunc. Maecenas a cursus dolor, ut maximus diam. In sed lacus urna. Maecenas
                auctor posuere tempor. Phasellus velit nisl, venenatis quis suscipit eu, sollicitudin at turpis.
                Vestibulum facilisis sodales ullamcorper. Mauris blandit ligula pellentesque mauris rhoncus pellentesque
                at et quam. Maecenas congue tortor eget mi lobortis rhoncus. Integer tempus quam quis augue consectetur,
                ut varius lacus sollicitudin. Mauris aliquam vestibulum eros, eu gravida massa. Etiam id ipsum a nisl
                ultrices fringilla. Etiam convallis ut quam at bibendum. Donec porta leo est, tincidunt dignissim ipsum
                dignissim ut. Sed tincidunt arcu non sem aliquet rhoncus. Cras gravida lectus quis nunc efficitur
                pellentesque. Nullam tempus mi id mauris ultrices consectetur. Etiam vel tincidunt neque. Ut placerat,
                enim condimentum suscipit molestie, sem felis feugiat lectus, a tempor neque nisl sit amet dolor. Donec
                egestas nec felis et efficitur. Vivamus pharetra accumsan auctor. Nulla rhoncus dapibus velit eleifend
                hendrerit. Sed fermentum fringilla maximus. Suspendisse nisi quam, maximus vel ex nec, commodo ultricies
                orci. Morbi ac enim in orci ullamcorper tempus. Cras varius volutpat quam in ullamcorper.
            </div>
        </div>
    </body>
</html>

Open this html in Chrome (version 133.0.6943.142) with a large enough window shows: normal bevahior

Note that there is no scroll bar in the aqua div.

Then resize the browser window to be smaller in height, then the scroll bar appear in the first div since it has min-height: 0

smaller window

Then resize the browser window to make it large enough, it becomes:

resize back

The scroll bar is still there for some unknown reason. Keep the browser window the same size and press F5. After refresh, the page it goes back to the situation in the first image (no scroll bar), so this means the window height is sufficient for the scroll bar to not appear, so overflow-y: auto should make it disappear automatically but it does not.

Is this a browser bug becuase I can't reproduce this in FireFox? If so, is there a workaround for this?

Upvotes: 0

Views: 27

Answers (2)

AlainPre
AlainPre

Reputation: 481

Try to add this property to the code of the aqua element:

scollbar-gutter:stable;

More info (sorry, in french) : scollbar-gutter

Upvotes: 1

scrhartley
scrhartley

Reputation: 1537

The header seems to be screwing it up. One solution is to flatten things and move the header up into its own flex item:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Resize bug</title>
    </head>
    <body>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
        </style>
        <div style="display: flex; flex-direction: column; max-height: 100vh; width: 400px">
            <div style="background-color: aqua;">header</div>
            <div style="background-color: aqua; min-height: 0; overflow-y: auto; overflow-x: hidden">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis eu ex sed faucibus. Nulla
                facilisi. Phasellus ac hendrerit libero. Pellentesque nec urna convallis leo aliquet maximus nec
                quis erat. Vivamus id congue quam. Nullam fringilla eget nunc tincidunt faucibus. Etiam sit amet
                arcu leo. Sed rutrum varius nibh, id vulputate massa laoreet eget. Sed pretium euismod neque et
                fermentum. Etiam id orci varius, feugiat ligula sed, interdum est. Donec scelerisque imperdiet odio.
                Quisque rutrum ut ligula sit amet tincidunt. Sed in dui tempus, malesuada massa eu, rutrum felis.
                Suspendisse potenti. Cras viverra eros massa, vel vulputate sem tincidunt eget. Nulla ac finibus
                metus, in tincidunt justo. Donec vehicula mi est, sit amet aliquet libero tincidunt rhoncus. Integer
                malesuada accumsan elit sit amet pretium. Morbi malesuada viverra aliquam. Maecenas ultrices ex
                ante, non tristique libero molestie sed. Aenean sed venenatis nunc. Maecenas a cursus dolor, ut
                maximus diam. In sed lacus urna. Maecenas auctor posuere tempor. Phasellus velit nisl, venenatis
                quis suscipit eu, sollicitudin at turpis. Vestibulum facilisis sodales ullamcorper. Mauris blandit
                ligula pellentesque mauris rhoncus pellentesque at et quam.
            </div>
            <div style="background-color: orange; margin-top: 0.25rem">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis eu ex sed faucibus. Nulla
                facilisi. Phasellus ac hendrerit libero. Pellentesque nec urna convallis leo aliquet maximus nec quis
                erat. Vivamus id congue quam. Nullam fringilla eget nunc tincidunt faucibus. Etiam sit amet arcu leo.
                Sed rutrum varius nibh, id vulputate massa laoreet eget. Sed pretium euismod neque et fermentum. Etiam
                id orci varius, feugiat ligula sed, interdum est. Donec scelerisque imperdiet odio. Quisque rutrum ut
                ligula sit amet tincidunt. Sed in dui tempus, malesuada massa eu, rutrum felis. Suspendisse potenti.
                Cras viverra eros massa, vel vulputate sem tincidunt eget. Nulla ac finibus metus, in tincidunt justo.
                Donec vehicula mi est, sit amet aliquet libero tincidunt rhoncus. Integer malesuada accumsan elit sit
                amet pretium. Morbi malesuada viverra aliquam. Maecenas ultrices ex ante, non tristique libero molestie
                sed. Aenean sed venenatis nunc. Maecenas a cursus dolor, ut maximus diam. In sed lacus urna. Maecenas
                auctor posuere tempor. Phasellus velit nisl, venenatis quis suscipit eu, sollicitudin at turpis.
                Vestibulum facilisis sodales ullamcorper. Mauris blandit ligula pellentesque mauris rhoncus pellentesque
                at et quam. Maecenas congue tortor eget mi lobortis rhoncus. Integer tempus quam quis augue consectetur,
                ut varius lacus sollicitudin. Mauris aliquam vestibulum eros, eu gravida massa. Etiam id ipsum a nisl
                ultrices fringilla. Etiam convallis ut quam at bibendum. Donec porta leo est, tincidunt dignissim ipsum
                dignissim ut. Sed tincidunt arcu non sem aliquet rhoncus. Cras gravida lectus quis nunc efficitur
                pellentesque. Nullam tempus mi id mauris ultrices consectetur. Etiam vel tincidunt neque. Ut placerat,
                enim condimentum suscipit molestie, sem felis feugiat lectus, a tempor neque nisl sit amet dolor. Donec
                egestas nec felis et efficitur. Vivamus pharetra accumsan auctor. Nulla rhoncus dapibus velit eleifend
                hendrerit. Sed fermentum fringilla maximus. Suspendisse nisi quam, maximus vel ex nec, commodo ultricies
                orci. Morbi ac enim in orci ullamcorper tempus. Cras varius volutpat quam in ullamcorper.
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Related Questions