CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-07-16 21:27:57 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to css overflow lesson (#63021)

Browse Source
This commit is contained in:
Vinson Pham 2025-10-24 04:22:38 -05:00 committed by GitHub
parent 5c6ab034e4
commit 62d4518b8f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 35 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md
View File

@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-is-overflow-in-css
---
# --description--
# --interactive--
Overflow refers to the way elements handle content that exceeds or overflows the size of the containing element. For example, the text content of a `div` element can overflow out of its borders.
@ -13,20 +13,54 @@ Overflow is two-dimensional, the x-axis determines horizontal overflow, and the
Let's fix the overflow on our example using the `overflow-y` CSS property. First we can hide the overflow entirely with `hidden` like this:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
```
```css
div {
height: 200px;
overflow-y: hidden;
}
```
:::
This resolves the overflow problem but now the extra content becomes completely unreachable. Instead we can use scroll to force the element to become scrollable:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
```
```css
div {
height: 200px;
overflow-y: scroll;
}
```
:::
Now this turns the container into a scrollable element, allowing all the content to be viewed by scrolling the element independently of the page scroll. We could also let the browser handle it on its own with `auto` value. It's worth noting that vertical scrolling is generally considered okay while horizontal scrolling might be questioned as it's generally not a common design decision.
With this knowledge, you can now control how your content overflows giving you more power over the layout of your pages.