Hidden, scroll, auto in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to hide overflow content in a box.

CSS

div {
  overflow: [1];
  width: 10rem;
  height: 5rem;
  border: 1px solid black;
}

Drag options to blanks, or click blank then click option'

Ahidden

Bauto

Cvisible

Dscroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'visible' which shows overflow content.

Using 'scroll' which adds scrollbars instead of hiding.

The hidden value hides any content that goes outside the box.

2fill in blank

medium

Complete the code to add scrollbars when content overflows.

CSS

div {
  overflow: [1];
  width: 8rem;
  height: 4rem;
  border: 1px solid black;
}

Drag options to blanks, or click blank then click option'

Ahidden

Bscroll

Cvisible

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' which shows scrollbars only if needed.

Using 'hidden' which hides overflow content.

The scroll value always shows scrollbars, allowing scrolling.

3fill in blank

hard

Fix the error in the code to show scrollbars only when needed.

CSS

div {
  overflow: [1];
  width: 12rem;
  height: 6rem;
  border: 1px solid black;
}

Drag options to blanks, or click blank then click option'

Aauto

Bscroll

Chidden

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'scroll' which always shows scrollbars.

Using 'hidden' which hides overflow content.

The auto value shows scrollbars only if the content is bigger than the box.

4fill in blank

hard

Fill both blanks to hide horizontal overflow but allow vertical scrolling.

CSS

div {
  overflow-x: [1];
  overflow-y: [2];
  width: 10rem;
  height: 5rem;
  border: 1px solid black;
}

Drag options to blanks, or click blank then click option'

Ahidden

Bscroll

Cauto

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'scroll' for horizontal overflow which shows scrollbars unnecessarily.

Using 'visible' which does not hide overflow.

Setting overflow-x to hidden hides horizontal overflow.
Setting overflow-y to auto shows vertical scrollbars only if needed.

5fill in blank

hard

Fill all three blanks to always show horizontal scrollbars, show vertical scrollbars only when needed.

CSS

div {
  overflow: [3];
  overflow-x: [1];
  overflow-y: [2];
  width: 15rem;
  height: 7rem;
  border: 1px solid black;
}

Drag options to blanks, or click blank then click option'

Ahidden

Bscroll

Cauto

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' for horizontal which shows scrollbars only when needed.

Using 'scroll' for vertical which always shows vertical scrollbars.

Using 'hidden' which clips overflow content.

overflow: visible; first sets both directions to visible.
overflow-x: scroll; always shows horizontal scrollbars.
overflow-y: auto; shows vertical scrollbars only if needed.