Hidden, scroll, auto in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS overflow: hidden; property do?

It hides any content that goes outside the element's box. The extra content is not visible and no scrollbars appear.

beginner

How does overflow: scroll; behave in CSS?

It always shows scrollbars, even if the content fits inside the element. This lets users scroll if needed.

beginner

Explain overflow: auto; in CSS.

It shows scrollbars only when the content is bigger than the element's box. If content fits, no scrollbars appear.

intermediate

Which CSS overflow value should you use to hide extra content but keep the element size fixed?

overflow: hidden; is best to hide extra content and keep the element size fixed without scrollbars.

intermediate

What is a practical use of overflow: auto; in responsive design?

It helps keep content accessible by adding scrollbars only when needed, especially on small screens or containers.

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

A Scrollbars appear only if content overflows

B Scrollbars always appear

C Extra content is hidden and no scrollbars appear

D Content resizes to fit container

overflow: hidden; hides any content outside the container without showing scrollbars.

Which overflow value always shows scrollbars regardless of content size?

A scroll

B visible

C hidden

D auto

overflow: scroll; always shows scrollbars, even if content fits inside.

When does overflow: auto; show scrollbars?

A Only if content is bigger than container

B Always

C Only on hover

D Never

overflow: auto; shows scrollbars only when content is larger than the container.

If you want to hide overflow but still allow scrolling, which value should you NOT use?

A scroll

B hidden

C auto

D visible

overflow: hidden; hides overflow and disables scrolling.

Which CSS property controls how content behaves when it overflows its container?

A visibility

B display

C position

D overflow

overflow controls the behavior of content that goes outside its container.

Describe the differences between overflow: hidden;, scroll;, and auto; in CSS.

Think about when scrollbars appear or if content is clipped.

Explain a situation where using overflow: auto; is better than scroll or hidden.

Consider responsive design and user accessibility.