Reverted overflow shorthand syntax has been updated to swap 2 values

Published: | Categories: CSS


Since Firefox 61, the CSS overflow property is a shorthand accepting both overflow-x and overflow-y. After a recent discussion in the CSS Working Group, the syntax has been changed to accept new logical properties, overflow-block and overflow-inline, to better support vertical writing modes. Firefox 63 has updated the implementation accordingly.

It means, the 2 x/y values have to be swapped like this:

overflow-x: scroll;
overflow-y: hidden;
/* On Firefox 61 and 62, this is the same as */
overflow: scroll hidden;
/* But on Firefox 63 and later, it will be */
overflow: hidden scroll;

Given that the shorthand syntax is still new and only implemented in the latest versions of Firefox and Google Chrome so far, the compatibility risk should be very low, hence the change.

At the time of writing, the overflow-block and overflow-inline longhand properties are not implemented yet.

Update: This change has been reverted during the Beta period, because the latest spec proposes a different, backward-compatible behaviour than the swap.