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.

Need a 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 */
}

Need a 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 */
}

Need a 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);
}

Need a hint?

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