diff --git a/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md b/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md
index 201a3b25087..13490e80f0b 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md
@@ -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
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+```
+
```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
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+```
```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.