Hide anything that overflows #box.
Acceptance criteria
- 1.Hide anything that overflows #box.
CSS Tutorial · CSS Layout
These 10 tasks go with the CSS Overflow chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “The CSS Overflow property controls what happens when content is too large to fit inside an element.” Read the chapter.
1.Clip the overflowexercise · easy · 10 min
Hide anything that overflows #box.
Passes when: Hide anything that overflows #box.
2.Always show scrollbarsexercise · easy · 10 min · practice plan
Force scrollbars on #box.
Passes when: Force scrollbars on #box.
3.Scroll only when neededexercise · easy · 10 min · practice plan
Use auto so scrollbars appear only if required.
Passes when: Use auto so scrollbars appear only if required.
4.Scroll one axisexercise · easy · 10 min · practice plan
Allow horizontal scrolling only.
Passes when: Allow horizontal scrolling only.
5.Build a scroll boxexercise · medium · 10 min · practice plan
Fixed height with vertical scrolling.
Passes when: Fixed height with vertical scrolling.
6.Fix the misspelled valuebug fix · easy · 8 min
The value is hidden.
Passes when: The value is hidden.
7.Fix the wrong axisbug fix · easy · 8 min · practice plan
The horizontal axis should scroll, not the vertical one.
Passes when: The horizontal axis should scroll, not the vertical one.
8.Fix the scroll box with no heightbug fix · easy · 8 min · practice plan
Without a height there is nothing to scroll.
Passes when: Without a height there is nothing to scroll.
9.Fix the wrong propertybug fix · easy · 8 min · practice plan
The property is overflow, not overflows.
Passes when: The property is overflow, not overflows.
10.Fix hidden used where auto was intendedbug fix · easy · 8 min · practice plan
Content is being clipped instead of made scrollable.
Passes when: Content is being clipped instead of made scrollable.
Between them these tasks cover overflow values, Per-axis overflow and Scroll containers.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.