Google Chrome Bug - Overflow:Auto | Scroll Doesn't Work

Strange behavior of overflow: auto on Chrome

I found the solution to my problem. For some reason, for this to work in Chrome I had to add a position:relative rule to #content:

#content{
    position: relative;
    height: 200px;
    overflow:visible;
    border 1px solid red;
}

Google Chrome Bug - Overflow:auto | scroll doesn't work

You need to edit both your section and textarea classes:

.section {
    height: 1000px;
    width: 670px;
    border: thick solid rgb(51, 97, 120);
    border-radius: 15px;
    text-align: center;
    padding: 0px;
    background-image: url(Images/diag_pattern.png);
    background-color: rgb(255, 255, 255);
    overflow-y: hidden;      /* ---- Make this hidden */
    white-space: nowrap;
    text-overflow: ellipsis;
}
.textarea {
    height: 1000px;
    width: 650;
    padding-right: 20px;
    padding-left: 20px;
    list-style: none;
    overflow-y: scroll;      /* ---- Then make this scrollable */
}

Overflow-x scroll not working on chrome and working on Firefox

You need to use the CSS white space property on wrapper element, in your example is <ul> tag like the following:

ul.overflow-x-scroll {
  ...
  white-space: nowrap;
}

For each child element, based on your example I think it will be <li> tag, make sure that the value of CSS floating property is none:

ul.overflow-x-scroll li{
  ...
  float: none;
}

scroll-behavior: smooth doesn't work on html / in Chrome

I found the issue:

https://bugs.chromium.org/p/chromium/issues/detail?id=1299237&q=scrollIntoView&can=2

It is a Chrome bug where the JS function scrollIntoView({ behavior: smooth }) and scroll-behavior: smooth; CSS property will be cancelled if there is another call or scroll action happening in an unrelated scrolling box.

In my case, I had a carousel that was using scrolling to animate the carousel items moving in a requestAnimationFrame

This bug was causing my smooth-scroll links to be cancelled on every tick due to the active scroll animation further down the page.

This bug has been open since Feb 19, 2022, still not fixed and haven't gotten any attention. So I will have to end up rewriting my carousel logic to use transform: translate instead scrolling to resolve this issue for Chrome users.

Strange scrolling issue in Chrome (Can't scroll with mousewheel)

Found a workaround. Adding transform: translateZ(0) to my main content sets the user input to that instead and I can scroll again.

Overflow-x scrollbars aren't visible on Chrome until I select and drag on content?

Here's one option for you:
https://codepen.io/panchroma/pen/wvdrzMe

It should work well on OS X Chrome and Safari and it's easy enough to style the slider the way you want.

Sample Image

::-webkit-scrollbar {
        width: 8px;
        background-color:#aaa;
    }

 ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: #000;
        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    }

Bug with overflow-y:scroll and position:absolute in Chrome

What caused the problem

Actually it's not a bug.

By using Chrome Developer Tools panel, you'll see that the computed height of the <ul> element and its parent <div> is calculated to 0.

<div id="container">
    <div class="big"></div>
    <div>  <!-- <= This -->
        <ul> <!-- <= And this -->
            ...

Because a percentage value of height property (which is applied to the <div>) is relative to the height of its parent.

10.5 Content height: the 'height' property

The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly (i.e., it depends on content height), and this
element is not absolutely positioned, the value computes to 'auto'.

As the <ul> is removed from normal flow by using absolute positioning, the computed height of the <div> would be 0. And consequently there would be no room for the <ul> element which has bottom: 0 declaration; So the computed height of <ul> would be 0 as well.

Hence if you apply overflow-y: scroll declaration to the <ul>, it hides all the list items as they all are out of the box.

The solution

Thanks to Flexbox (display: box old syntax you've used on the container), <div> elements within the #container fills the entire height of their parent by default.

Thus, you could safely remove height: 100% declaration from #container div selector which causes the trouble, and also use Flexbox display type for the <div> to make the <ul> fills the entire height:

EXAMPLE HERE (Another one HERE)

#container div {
    position: relative;
    /* height: 100%; */
    width: 200px;

    display: -moz-box;
    display: -webkit-box;
    display: box;
}

^{PS: In order to check the old answer - which was sort of under a misunderstanding - click here.}