Skip to main content

CSS Overflow — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Overflow lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Exercises(5)

  1. 1

    Clip the overflow

    easy10 min

    Hide anything that overflows #box.

  2. 2

    Always show scrollbars

    easy10 min

    Force scrollbars on #box.

  3. 3

    Scroll only when needed

    easy10 min

    Use auto so scrollbars appear only if required.

  4. 4

    Scroll one axis

    easy10 min

    Allow horizontal scrolling only.

  5. 5

    Build a scroll box

    medium10 min

    Fixed height with vertical scrolling.

Find the bug(5)

  1. 1

    Fix the misspelled value

    easy8 min

    The value is hidden.

  2. 2

    Fix the wrong axis

    easy8 min

    The horizontal axis should scroll, not the vertical one.

  3. 3

    Fix the scroll box with no height

    easy8 min

    Without a height there is nothing to scroll.

  4. 4

    Fix the wrong property

    easy8 min

    The property is overflow, not overflows.

  5. 5

    Fix hidden used where auto was intended

    easy8 min

    Content is being clipped instead of made scrollable.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace