HTML & CSS Interview Question #146

How do you debug horizontal overflow on mobile?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

Start by identifying the element whose rendered width extends beyond the viewport. Browser developer tools can inspect box sizes and highlight overflow. Common causes include fixed widths, long unbreakable content, images without max-width, grid tracks with large minimums, and flex or grid children whose automatic minimum size prevents shrinking.

Detailed Explanation

Start by identifying the element whose rendered width extends beyond the viewport. Browser developer tools can inspect box sizes and highlight overflow. Common causes include fixed widths, long unbreakable content, images without max-width, grid tracks with large minimums, and flex or grid children whose automatic minimum size prevents shrinking.

Fix the actual overflowing component rather than globally hiding overflow. Useful corrections include max-width: 100%, min-width: 0 on flex/grid children, minmax(0, 1fr) for grid tracks, responsive media, and deliberate wrapping for long text or code.

Code Example

.page {
    max-width: 100%;
}

.flex-child {
    min-width: 0;
}

.grid {
    grid-template-columns:
        minmax(0, 1fr);
}

img {
    max-width: 100%;
    height: auto;
}

pre {
    overflow-x: auto;
}