Overflow property in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS overflow property control?

The <code>overflow</code> property controls what happens to content that is too big to fit inside its container. It can show scrollbars, hide the extra content, or let it spill out.

beginner

Name the four main values of the overflow property.

• visible: Content spills out (default).
• hidden: Extra content is hidden.
• scroll: Always shows scrollbars.
• auto: Shows scrollbars only if needed.

beginner

What happens if you set overflow: hidden; on a container?

Any content that is bigger than the container will be cut off and not visible. No scrollbars will appear.

intermediate

How does overflow: auto; improve user experience?

It only shows scrollbars when the content is too big. This keeps the page clean but still lets users scroll if needed.

intermediate

Why is it important to use the overflow property with accessibility in mind?

Because hidden or scrollable content must be reachable by keyboard and screen readers. Proper use ensures all users can access all content.

What is the default value of the CSS overflow property?

A scroll

B visible

C hidden

D auto

By default, overflow is set to visible, so content spills outside the container if it is too big.

Which overflow value always shows scrollbars, even if content fits?

A visible

B auto

C hidden

D scroll

scroll always shows scrollbars regardless of content size.

If you want to hide extra content without scrollbars, which overflow value should you use?

A hidden

B visible

C scroll

D auto

hidden hides content that overflows and does not show scrollbars.

What does overflow: auto; do?

A Never shows scrollbars

B Always shows scrollbars

C Shows scrollbars only if needed

D Lets content spill out

auto shows scrollbars only when content is too big for the container.

Which property would you combine with overflow to create a scrollable box?

A width and height

B color

C font-size

D margin

Setting fixed width and height limits the container size, so overflow controls how extra content is handled.

Explain the different values of the CSS overflow property and when you might use each.

Think about how content behaves when it is bigger than its container.

Describe how to make a box with fixed size that shows scrollbars only when content is too large.

Combine size limits with the right overflow value.