Skip to main content

Intrinsic Sizing — exercises and bug fixes

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

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Set a min-content minimum

    easy10 min

    Give #box a min-width of min-content.

  2. 2

    Set a max-content maximum

    easy10 min

    Give #box a max-width of max-content.

  3. 3

    Cap with fit-content

    easy10 min

    Give #box a max-width of fit-content.

  4. 4

    Combine a minimum and a fixed width

    easy10 min

    200px wide but never below min-content.

  5. 5

    Cap the height intrinsically

    medium10 min

    Give #box a max-height of max-content.

Find the bug(5)

  1. 1

    Fix the misspelled keyword

    easy8 min

    The keyword is min-content.

  2. 2

    Fix min and max confused

    easy8 min

    Capping the width uses max-width.

  3. 3

    Fix the fixed width that should be intrinsic

    easy8 min

    The cap should follow the content, not a hard number.

  4. 4

    Fix the missing minimum

    easy8 min

    The box needs a min-content floor as well as its width.

  5. 5

    Fix the wrong axis

    easy8 min

    The intrinsic cap was applied to width instead of height.

Ready to write the code?

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

Open the workspace