CSS grid on mobile: an item with margin: 0 auto is wider than the screen even with min-width: 0 — how do I stop the horizontal overflow?

Auto margins change how a grid item is sized: instead of stretching to the track, it shrinks-to-fit its content (fit-content). Its min-content width includes long unbreakable content inside it, such as a <pre> line or a long URL, so the item grows past the column and the page scrolls sideways. min-width: 0 on the item doesn't help, because the size comes from fit-content, not from the automatic minimum. Fix: give the item an explicit width so it fills the track, and keep the max-width for centering: .page { display: grid; grid-template-columns: minmax(0, 1fr); } .page > * { width: 100%; min-width: 0; } /* keep max-width + margin: 0 auto */ pre { overflow-x: auto; } Alternatively drop the auto margins on the item and use justify-self / justify-content: center on the grid. The same thing happens with display: flex; flex-direction: column plus auto margins.