HTML Guides for overflow-y

The overflow-y property accepts only the keywords visible, hidden, clip, scroll and auto, so the old overlay keyword, like any other value, is rejected.

overlay started as a WebKit value that drew the scrollbar on top of the content instead of reserving room for it beside the content. It never became part of the standard. The CSS Overflow specification keeps it only as a legacy alias of auto: browsers must still accept it, but they treat it exactly like auto, and it isn't a value authors are meant to write. The validator reports other values it doesn't recognize in the same way, such as none, which belongs to other properties, or a typo like scrol.

Replace overlay with auto. The scrollbar then appears only when the content is taller than the box, which is what browsers already do with overlay, so the page looks the same. No standard value makes the scrollbar float over the content. Whether scrollbars sit on top of the content or take up space beside it is up to the browser and the operating system.

Keeping overflow-y: overlay after an overflow-y: auto fallback in the same rule doesn't help either. The validator still reports the overlay declaration, and in browsers that follow the specification it changes nothing.

Invalid example

<style>

.message-list {

max-height: 20rem;

overflow-y: overlay;

}

</style>

<div class="message-list">

<p>Your order has shipped.</p>

<p>Your invoice is ready.</p>

</div>

Valid example

<style>

.message-list {

max-height: 20rem;

overflow-y: auto;

}

</style>

<div class="message-list">

<p>Your order has shipped.</p>

<p>Your invoice is ready.</p>

</div>