CSS - How to change scrollbar height - html

Question

I have a block that has a property "overflow: scroll" I want to change the height of my scroll from https://ibb.co/gFyfDwT to this https://ibb.co/SsByRXB
Lesson.jsx
import React from 'react';
import less from "./css/lesson.module.css";
import "./css/betaLesson.css";
export class Lessons extends React.Component {
render() {
return (
<>
<div className="abc">
<div className={less.wrapper}>
<div>
<div className={less.sidebar}>
<div>
{listLessons}
</div>
</div>
</div>
</div>
</div>
</>
);
}
}
style.css
const sidebar: {
width: 240px;
overflow: scroll;
height: 100%;
background: #ffffff;
padding: 15px 0px;
position: fixed;
}

Answer 1

You could add another class inside the div with all the lessons and than add a height inside depending on your requirements, which might be 300%.
import React from 'react';
import less from "./css/lesson.module.css";
import "./css/betaLesson.css";
export class Lessons extends React.Component {
render() {
return (
<>
<div className="abc">
<div className={less.wrapper}>
<div>
<div className={less.sidebar}>
<div className={less.lessons}>
{listLessons}
</div>
</div>
</div>
</div>
</div>
</>
);
}
}
const sidebar: {
width: 240px;
overflow: scroll;
height: 100%;
background: #ffffff;
padding: 15px 0px;
position: fixed;
}
const lessons: {
height: 300% // or 2000px...
}