How to make a scrolling box div in css?

[Scrimby]

Hello! my question is how would i make a small box with text in it that has it’s own scroll bar? I get the basic add a div class and in css add a overflow: scroll and width and height, but for some reason it just doesn’t work?

html

<div class="box">
 yay
</div>

css

.box {
height: 200px;
width: 120px;
background-color: white;
overflow: scroll;
}

i’m not sure what i’m doing wrong.

[toan]

The text content inside your div is too short to make it overflow.
Try to use a longer text content.

[Scrimby]

for some reason, it displays too wide? (the text is just a test)

[toan]

This is weird as width and height is set in CSS.

Your code worked. Check out this pen:

Scrolling div box

[Scrimby]

I don’t get it? i already have the width and height in css?

also when i put in text, it just displays the whole thing, horizontally.

[Scrimby]

oh! perhaps the css above it is causing it to not work?

body {
  background-color: #8aadff;
  font-family: Nintendo DS BIOS;
  src: url("/fonts/NDSBIOS.ttf");
  font-size: 20px;
  text-align: center;
  color: #031e38;
}

.box {
height: 120px;
width: 120px;
background-color: white;
overflow: scroll;
}

[Scrimby]

alright, its working now! I just had to empty my web cache…thank you!