CSS box model and layout: size content without accidental overflow

Keep a data card inside its column

A receipt panel with width: 100% and 24px padding can overflow its parent under content-box sizing. Set border-box for the component or for the document. A grid column still needs minmax(0, 1fr) when long content must shrink instead of forcing the track wider.

.receipt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; }
.receipt-panel { box-sizing: border-box; width: 100%; padding: 1.5rem; border: 1px solid #c9d3df; }
.receipt-panel pre { max-width: 100%; overflow-x: auto; }

The fixed second track needs enough viewport width. At narrow sizes, change the grid to one column instead of allowing the main content to compress below a readable width. Code blocks retain horizontal scrolling so long lines do not stretch the page.

Costs and boundaries

Grid and flexbox solve different axes of layout. Use grid when track relationships matter; use flexbox for a row of controls whose widths follow content. Neither layout mode fixes an unbounded image or a preformatted block that refuses to shrink.

Common Mistakes

• width: 100% under content-box can exceed the parent after padding is added.
• A grid child may need min-width: 0 before it can shrink.
• Hiding overflow can cut off content and keyboard focus.

Read next

Read responsive layout before choosing a breakpoint. HTML structure determines whether the resulting order remains meaningful.