From 62d4518b8fc1f4f0cc689af02af132b8bc215660 Mon Sep 17 00:00:00 2001
From: Vinson Pham <57196881+cuongpham24@users.noreply.github.com>
Date: Fri, 24 Oct 2025 04:22:38 -0500
Subject: [PATCH] feat(curriculum): Add interactive examples to css overflow
 lesson (#63021)

---
 .../672aa7e03c2e365e906e5733.md               | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

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
+<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.