Never overflow the screen — practice exercise

What you'll be asked to do

1. 1.Never overflow the screenexercise · easy · 10 min

   Stop .cell growing wider than its container.

   Passes when: Stop .cell growing wider than its container.

2. 2.Size against the viewportexercise · easy · 10 min · practice plan

   Make #grid half the viewport width.

   Passes when: Make #grid half the viewport width.

3. 3.Cap a fluid widthexercise · easy · 10 min · practice plan

   Make #grid fluid but never wider than 300px.

   Passes when: Make #grid fluid but never wider than 300px.

4. 4.Let the items wrapexercise · easy · 10 min · practice plan

   Lay #grid out as a wrapping flex row.

   Passes when: Lay #grid out as a wrapping flex row.

5. 5.Scale the text fluidlyexercise · medium · 10 min · practice plan

   Give .cell a font-size clamped between 14px and 24px, scaling at 2vw.

   Passes when: Give .cell a font-size clamped between 14px and 24px, scaling at 2vw.

6. 6.Fix the fixed width that overflowsbug fix · easy · 8 min

   A hard width cannot shrink; cap it instead.

   Passes when: A hard width cannot shrink; cap it instead.

7. 7.Fix the desktop grid leaking to phonesbug fix · easy · 8 min · practice plan

   Three columns should only appear from 700px up.

   Passes when: Three columns should only appear from 700px up.

8. 8.Fix the percentage read as a viewport unitbug fix · easy · 8 min · practice plan

   50vw is half the viewport, not half the parent.

   Passes when: 50vw is half the viewport, not half the parent.

9. 9.Fix min and max swappedbug fix · easy · 8 min · practice plan

   Capping a fluid width uses min(), which picks the smaller value.

   Passes when: Capping a fluid width uses min(), which picks the smaller value.

10. 10.Fix the row that will not wrapbug fix · easy · 8 min · practice plan

    Without wrapping, the items are squeezed instead of flowing onto new lines.

    Passes when: Without wrapping, the items are squeezed instead of flowing onto new lines.

Between them these tasks cover Fluid sizing, Wrapping layouts and min() and clamp().

Looking for a different chapter? See every practice set, or switch to the interview theory questions.