Hidden, scroll, auto in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What happens when overflow: hidden; is applied?

If a container has content larger than its size and overflow: hidden; is set, what will the user see?

A The container expands to fit all content, ignoring its set size.

B Scrollbars appear allowing the user to scroll to see the extra content.

C The extra content is visible outside the container boundaries.

D The extra content is clipped and not visible or scrollable.

💡 Hint

Think about what 'hidden' means in everyday life, like hiding something behind a curtain.

overflow: hidden; clips any content that goes beyond the container's size. The user cannot scroll to see it, so it is effectively hidden.

📝 Syntax

intermediate

Which CSS rule correctly enables scrollbars only when needed?

You want scrollbars to appear only if the content is bigger than the container. Which CSS overflow value should you use?

A overflow: visible;

B overflow: scroll;

C overflow: auto;

D overflow: hidden;

💡 Hint

Think about a door that opens only when someone wants to enter.

overflow: auto; shows scrollbars only if the content is larger than the container. scroll always shows scrollbars, even if not needed.

❓ rendering

advanced

What will the user see with this CSS?

Given this HTML and CSS, what will the user see in the browser?

<div class="box">This is a very long text that will not fit inside the box.</div>

.box { width: 10rem; height: 3rem; overflow: scroll; border: 1px solid black; }

A A box that clips the text and shows no scrollbars.

B A 10rem by 3rem box with scrollbars allowing the user to scroll to see all the text.

C A box that expands to fit all the text without scrollbars.

D A box with no border and no scrollbars.

💡 Hint

Scroll means you can move the content inside the box to see hidden parts.

overflow: scroll; always shows scrollbars, so the user can scroll inside the fixed-size box to see all content.

❓ selector

advanced

Which CSS selector targets only elements with overflow set to auto?

You want to style only elements that have overflow: auto; set in their inline style attribute. Which selector works?

A [style*="overflow: auto"]

B .auto-overflow

C [overflow="auto"]

D :overflow(auto)

💡 Hint

Attribute selectors look inside the HTML tag's attributes.

[style*="overflow: auto"] selects elements whose style attribute contains the text overflow: auto. Other options are invalid or select by class or non-existent pseudo-class.

❓ accessibility

expert

How to ensure keyboard users can scroll a container with overflow: auto;?

You have a scrollable container with overflow: auto;. What is the best way to make sure keyboard users can scroll it?

A Add <code>tabindex="0"</code> to the container so it can receive keyboard focus.

B Remove all focusable elements inside the container.

C Set <code>overflow: hidden;</code> to prevent scrolling.

D Add <code>aria-hidden="true"</code> to hide it from screen readers.

💡 Hint

Keyboard users need to focus on the container to scroll it with arrow keys.

Adding tabindex="0" makes the container focusable by keyboard. Then users can scroll it using keyboard arrows. Hiding it or removing focusable elements prevents accessibility.