TIL: It is not possible to use overflow-x: scroll and overflow-y: visible at the same time

On several browsers, using the visible value for the overflow-x or overflow-y properties will not behave as expected as soon as you specify any other value than visible for the other overflow property. In such cases, the visible is silently overridden to take the auto value, which, by default is the same as scroll.

Here's an example :

.my-container {
    max-height: 12px;

    /* I have a long content on a single line that must scroll */
    overflow-x: scroll;

    /* I have some content that will overflow vertically but I want it to be visible at all times, without scrolling */
    overflow-y: visible;
}

In the above example, both a horizontal and a vertical scrollbar will appear since the browser silently overrides overflow-y: visible to overflow-y: auto (which in my browser behaves as overflow-y: scroll).

Sources :

• https://stackoverflow.com/a/6433475/9073639

• https://www.brunildo.org/test/Overflowxy2.html

• (Outdated but still relevant W3C spec) https://www.w3.org/TR/2007/WD-css3-box-20070809/