A Row of Cards That Does Not Break
Decide what you would build from the brief alone. Everything below it is available, but the exercise stops working if you open it first.
Lay out a row of product cards: equal width, equal height, evenly spaced, wrapping to the next line when there is not enough room. Card content varies in length.
Fixing the overflow with overflow-x: hidden on the container. The scrollbar disappears, the screenshots look right and the layout is now silently clipping content: the long SKU is still wider than the card, it is just unreachable, and it will be unreachable in exactly the cases — long product names, translated strings, large text settings — where the user most needs to read it. Hiding overflow treats the symptom that is visible and preserves the one that is not.