Problem description

A .scroller container holds multiple .card items of varying content heights. The task is to:

1. Display cards in a horizontal row with Flexbox.

2. Ensure all cards flex to the height of the tallest card.

3. Enable smooth horizontal scrolling with snap points at each card.

Goal

Implement CSS-only equal height horizontal scrolling with snap behavior and responsive height adaptation.

Constraints

Only CSS may be used; HTML must remain unchanged, and no JavaScript is allowed.

Sample visual output

Here’s what the output would look like:

All cards share equal height, and scrolling snaps each card fully into view.

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.