How to set up a vertical scroll inside a div

HTML & CSS
1

Live Link

I tried this →

overflow-y: auto;
height: 100px;

Target: I want to set a vertical scroll on the left sidebar that has content.

2

Your looking for scroll when using a fixed height

overflow-y: scroll;

1 Like
3

There’s something wrong with the codepen site, I don’t see where or how to make edits.

1 Like
4

I tried with this one also, but it also could not create the vertical scroll.

5

Try just using


overflow: scroll;

EDIT:
No, that gives scrollbars each way

1 Like
6

I tried, but that also creates a Horizontal scroll,which is not needed.

7

I am in chrome and can go to “inspect element”

8

If you set up a min-width it should work with overflow-y

overflow-y: scroll;
min-width: 200px;
height: 200px;
1 Like
9

I tried this:

max-height: 150px;
    overflow-y: scroll;

this worked, but the scroll bar was not visible. although on mouse wheel movement the content was vertically scrolling.

10

I got it to work with:

overflow-y: auto;
height: 100px;

I also use that in one of my sites, and it works well.

1 Like
11

Is the element you’re wanting to give scrollbars to block level?

Applies to
non-replaced block-level elements 
and non-replaced inline-block elements
12

I’m using it on .sidebar and it changed appropriately in the codepen.

1 Like
13

When you reduce viewport width you will get a horizontal scrollbar without a min-width.

He’s using flex

1 Like
14

Hi there codeispoetry,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self';script-src 'self'; style-src 'self'">-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

#box {
    max-width: 20em;
    height: 20em;
    padding: 1em;
    margin: auto;
    border: 0.062em solid #999;
    background-color: #fff;
    overflow: auto;
    direction: rtl;
    text-align: left;
}
</style>

</head>
<body> 

 <div id="box">
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  Curabitur sit amet sem sed libero bibendum tempus faucibus       
  quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
  nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
  interdum justo ac justo vehicula consequat. Curabitur et 
  volutpat nibh. Phasellus rutrum lacus at dolor placerat 
  feugiat. Morbi porta, sapien nec molestie molestie, odio 
  magna vestibulum lorem, vitae feugiat est leo sit amet 
  nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
  magna sed, pretium commodo odio. Sed porttitor augue velit, 
  quis placerat diam sodales ac. Curabitur vitae porta ex. 
  Praesent rutrum ex fringilla tellus tincidunt interdum. 
  Proin molestie lectus consectetur purus aliquam porttitor. 
  Fusce ac nisi ac magna scelerisque finibus a vitae sem.
 </p>
 </div>

</body>
</html>

coothead

1 Like
15

Yes, it is working.

16

This also worked. putting the scroll in the left like this →

710×529 20.9 KB

#Update:
this fixes the things →

direction: ltr;
17

Please post a link to your updated working code

Have you tested with reduced the view port width?

overflow-y:auto Introduces a scrollbar when it’s needed

overflow-y:scroll Has scrollbar position in there at all times

2 Likes
18

This one

19

I would still set up a min-width

Your getting a bottom scrollbar when you narrow your viewport

20

No.

895×754 24.4 KB

Final code I am using is →

	/*max-width: 20em;*/
    max-height: 46em;
    /*padding: 1em;*/
    margin: auto;
    /*border: 0.062em solid #999;*/
    background-color: #fff;
    overflow-y: auto;
    direction: ltr;
    text-align: left;