Hidden, scroll, auto in CSS - Mini Project: Build & Apply

Controlling Overflow with Hidden, Scroll, and Auto

📖 Scenario: You are creating a simple webpage section that contains a box with text content. Sometimes the content is longer than the box size, so you want to control how the extra content is handled.

🎯 Goal: Build a webpage with a fixed-size box and apply different CSS overflow properties: hidden, scroll, and auto to see how they affect content visibility and scrolling.

📋 What You'll Learn

Create a div with class box containing a paragraph of text.

Add a CSS variable --overflow-style to control the overflow property.

Use the CSS variable to set the overflow property of the box.

Add the final CSS rule to apply the overflow style to the box.

💡 Why This Matters

🌍 Real World

Controlling overflow is important when designing user interfaces to keep content tidy and usable, especially on small screens or fixed-size containers.

💼 Career

Web developers often need to manage overflow to improve user experience and ensure content is accessible and visually appealing.

1

Create the HTML structure with a fixed-size box

Create a div element with class box that contains a p element with the exact text: "This is some long text that will overflow the box if it is too small."

CSS

  This is some long text that will overflow the box if it is too small.

Hint

Use a div with class box and put the exact text inside a p tag.

2

Add a CSS variable for overflow style

Add a CSS rule for the .box class that sets width to 15rem, height to 5rem, border to 1px solid black, and define a CSS variable called --overflow-style with the value hidden.

CSS

  This is some long text that will overflow the box if it is too small.



.box {
  width: 15rem;
  height: 5rem;
  border: 1px solid black;
  /* Define CSS variable --overflow-style here */
}

Hint

Remember to use --overflow-style: hidden; inside the .box CSS rule.

3

Use the CSS variable to set the overflow property

Inside the .box CSS rule, add a line that sets overflow to the CSS variable var(--overflow-style).

CSS

  This is some long text that will overflow the box if it is too small.



.box {
  width: 15rem;
  height: 5rem;
  border: 1px solid black;
  --overflow-style: hidden;
  overflow: var(--overflow-style);
  /* Your code here */
}

Hint

Use overflow: var(--overflow-style); to apply the CSS variable.

4

Change the CSS variable to test scroll and auto overflow

Change the value of the CSS variable --overflow-style inside the .box CSS rule from hidden to scroll.

CSS

  This is some long text that will overflow the box if it is too small.



.box {
  width: 15rem;
  height: 5rem;
  border: 1px solid black;
  --overflow-style: scroll; /* Change hidden to scroll here */
  overflow: var(--overflow-style);
}

Hint

Change the CSS variable value to scroll to see scrollbars always appear.

Practice

1. What does the CSS property overflow: hidden; do to extra content that doesn't fit in a container?

easy

A. It always shows scrollbars to access extra content.

B. It enlarges the container to fit all content.

C. It shows scrollbars only if the content overflows.

D. It hides the extra content without showing scrollbars.

Solution

1. Step 1: Understand overflow: hidden; behavior

   This property hides any content that goes beyond the container's size without showing scrollbars.

2. Step 2: Compare with other overflow values

   Unlike scroll or auto, it does not provide any way to scroll to hidden content.

3. Final Answer:

   It hides the extra content without showing scrollbars. -> Option D

4. Quick Check:

   hidden hides overflow [OK]

Hint: Hidden means no scrollbars, just cut off content [OK]

Common Mistakes:

• Thinking hidden shows scrollbars
• Confusing hidden with auto
• Assuming content resizes container

2. Which of the following is the correct CSS syntax to always show scrollbars on overflow?

easy

A. overflow: auto;

B. overflow: scroll;

C. overflow: hidden;

D. overflow: visible;

Solution

1. Step 1: Recall CSS overflow values

   scroll always shows scrollbars regardless of content size.

2. Step 2: Verify syntax correctness

   The syntax overflow: scroll; is valid and forces scrollbars.

3. Final Answer:

   overflow: scroll; -> Option B

4. Quick Check:

   scroll always shows scrollbars [OK]

Hint: Scroll means scrollbars always visible [OK]

Common Mistakes:

• Using auto instead of scroll
• Confusing hidden with scroll
• Writing invalid property names

3. Given this CSS and HTML:

div {
  width: 100px;
  height: 100px;
  overflow: auto;
  border: 1px solid black;
}

This is a very long text that will overflow the box and may require scrolling.

What will the user see in the browser?

medium

A. No scrollbars, content is cut off.

B. Scrollbars always visible even if not needed.

C. Scrollbars appear only if content overflows.

D. Content expands container size to fit all text.

Solution

1. Step 1: Understand overflow: auto; behavior

   This value shows scrollbars only when content is bigger than the container.

2. Step 2: Analyze the content size

   The text is longer than 100px width and height, so scrollbars will appear.

3. Final Answer:

   Scrollbars appear only if content overflows. -> Option C

4. Quick Check:

   auto shows scrollbars if needed [OK]

Hint: Auto means scrollbars only if content is too big [OK]

Common Mistakes:

• Thinking auto always shows scrollbars
• Assuming content resizes container
• Confusing auto with hidden

4. You want to hide overflow content but accidentally wrote overflow: auto hidden; in your CSS. What will happen?

medium

A. The first value auto sets horizontal overflow, hidden sets vertical overflow.

B. The browser will ignore the entire overflow property.

C. The browser will show scrollbars always.

D. The CSS will cause a syntax error and not apply.

Solution

1. Step 1: Understand CSS overflow shorthand

   overflow can take one or two values: first for horizontal, second for vertical overflow.

2. Step 2: Analyze two-value syntax

   auto hidden is valid shorthand: horizontal = auto, vertical = hidden.

3. Final Answer:

   The first value auto sets horizontal overflow, hidden sets vertical overflow. -> Option A

4. Quick Check:

   Two-value overflow sets horizontal and vertical separately [OK]

Hint: Two values set horizontal and vertical overflow separately [OK]

Common Mistakes:

• Thinking invalid syntax causes error
• Assuming both values apply as one
• Ignoring two-value overflow shorthand

5. You have a container with fixed width and height. You want to ensure that if content overflows horizontally, a scrollbar appears, but vertically overflow content is hidden without scrollbars. Which CSS is correct?

hard

A. overflow-x: scroll; overflow-y: hidden;

B. overflow-x: hidden; overflow-y: scroll;

C. overflow: scroll;

D. overflow: auto;

Solution

1. Step 1: Identify horizontal and vertical overflow needs

   Horizontal overflow needs scrollbars, vertical overflow should hide content.

2. Step 2: Use directional overflow properties

   overflow-x: scroll; forces horizontal scrollbars, overflow-y: hidden; hides vertical overflow.

3. Step 3: Check other options

   overflow: scroll; shows scrollbars both directions; overflow: auto; shows scrollbars only if needed both directions; overflow-x: hidden; overflow-y: scroll; reverses the requirement.

4. Final Answer:

   overflow-x: scroll; overflow-y: hidden; -> Option A

5. Quick Check:

   Directional overflow controls scrollbars separately [OK]

Hint: Use overflow-x and overflow-y for separate scroll control [OK]

Common Mistakes:

• Using single overflow property for different directions
• Confusing scroll and auto
• Forgetting to hide vertical overflow