The only difference is that overflow: overlay is only supported by -Webkit browsers, is non-standardized, and allows the content to extend beneath the scrollbar – whereas overflow: auto will not allow the content to extend beneath the scrollbar, if it appears it’ll occupy the space required and shift the content accordingly (either vertically or horizontally).
p {
display: inline-block;
width: 12em;
height: 5em;
border: dotted;
}
p.overflow-auto { overflow: auto; /* append scrollbars if necessary and shift content accordingly to accommodate */ }
p.overflow-overlay { overflow: overlay; /* append scrollbars if necessary and overlay over/above content */ }<p class="overflow-auto">overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p class="overflow-overlay">overflow: overlay
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>The above snippet demonstrates the difference as follows:
p.overflow-auto { overflow: auto; /* append scrollbars if necessary and shift content accordingly to accommodate */ }
p.overflow-overlay { overflow: overlay; /* append scrollbars if necessary and overlay over/above content */ }