HTML & CSS Interview Question #85

What does the overflow property do?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

overflow controls what happens when content exceeds an element's box in a relevant direction. Common values include visible, hidden, clip, auto, and scroll, with overflow-x and overflow-y available for individual axes.

Detailed Explanation

overflow: auto is commonly used when scrolling should appear only when necessary. Developers should avoid hiding important content merely to conceal a layout bug, and should remember that overflow can influence sticky positioning and scroll containers.

Code Example

.code-box {
    max-width: 100%;
    overflow-x: auto;
}

.panel {
    max-height: 400px;
    overflow-y: auto;
}