When it comes to creating a vertically scrollable div, the W3 doc suggests:
To achieve a scrollable bar, utilize the x and y-axis. Set overflow-x: hidden; and overflow-y: auto; to hide the horizontal scrollbar while showing the vertical one automatically.
The information provided by the MDN web docs on overflow-y is as follows:
The overflow-y CSS property determines how content appears when it overflows a block-level element's top and bottom edges. It can be nothing, a scroll bar, or the overflowing content itself. This property can also be specified using the overflow shorthand property.
https://i.sstatic.net/wNXg3.jpg
Looking at The Overflow Property (which showcases a similar issue you might be facing) versus The overflow-y Property. To address your specific case, simply add a line like this:
main .description {
max-height: 5rem;
font-size: 14px;
padding-right: 0.625rem;
overflow-y: scroll; /****----- allow vertical scroll only -----****/
}
The code snippet below demonstrates how this property works in practice:
const toggleThemeButton = document.getElementById("theme-toggle-button");
const body = document.querySelector("body");
const themeToggleButtonImage = document.querySelector(".toggle-button-image");
toggleThemeButton.addEventListener("click", () => {
const darkModeActive = body.classList.contains("dark-mode");
body.classList.toggle("dark-mode");
if (darkModeActive) {
themeToggleButtonImage.setAttribute("src", "./src/images/sun.png");
} else {
themeToggleButtonImage.setAttribute("src", "./src/images/moon.png");
}
});
/****----- RESET -----****/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
/****----- MAIN -----****/
body{
font-family: 'Poppins', sans-serif;
max-width: 80rem;
margin: 0 auto 0 auto;
background-color: #5e5b5bad;
color: #333333;
}
body.dark-mode{
background-color: #212121;
color: #f5f5f5;
}
header{
display: flex;
justify-content: space-between;
padding: 1.5625rem;
}
header .logo,
header .toggle-button-image{
width: 1.875rem;
transition: 0.2s ease-in-out;
}
header #theme-toggle-button{
background: none;
border: none;
}
header .logo:hover,
header .toggle-button-image:hover,
main .pokemon-card:hover{
transform: scale(1.05);
cursor: pointer;
}
main{
padding: 1.5625rem;
}
main .pokemon-list {
display: flex;
flex-wrap: wrap;
gap: 1.875rem;
justify-content: center;
}
main .pokemon-card{
background-color: #d8e3ec;
width: 12.5rem;
padding: 0.9375rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9375rem;
border-radius: 15px;
transition: 0.2s ease-in-out;
}
main .pokemon-card:hover{
background-color: #96d9d6;
}
.dark-mode .pokemon-card {
background-color: #a8a8a8;
}
main .pokemon-card .information{
display: flex;
justify-content: space-between;
border: 0.0625rem solid #333333;
border-radius: 10px;
}
main .pokemon-card .gif{
width: 60px;
height: 60px;
}
main .pokemon-card .information span{
padding: 0.3125rem;
text-transform: uppercase;
font-size: 1.0625rem;
}
main .pokemon-card .types {
display: flex;
gap: 0.9375rem;
}
main .pokemon-card .type{
padding: 0.5rem;
border-radius: 10px;
}
.grass{
background-color: #9bcc50;
}
.poison{
background-color: #b97fc9;
}
.fire{
background-color: #fd7d24;
}
.water{
background-color: #4592c4;
}
.flying{
background-color: #3dc7ef;
}
.bug{
background-color: #729f3f;
}
.normal{
background-color: #83898b;
}
.electric{
background-color: #eed535;
}
.ground{
background-color: #ab9842;
}
.fairy{
background-color: #fdb9e9;
}
main .description {
max-height: 5rem;
font-size: 14px;
padding-right: 0.625rem;
overflow-y: scroll; /****----- authorize vertical scroll only -----****/
}
/****----- SCROLLBAR -----****/
::-webkit-scrollbar{
width: 12px;
}
body::-webkit-scrollbar-track {
background: #d8e3ec;
border-radius: 10px;
margin-block: 0.1875rem;
}
::-webkit-scrollbar-thumb{
background-color: #582965;
border-radius: 10px;
border: 3px solid #ffffff;
}
::-webkit-scrollbar-thumb:hover{
background-color: #40144d;
}
::-webkit-scrollbar-track:horizontal{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<a href="https://www.pokemon.com/br/pokedex/" target="_blank">
<img src="./src/images/pokeball.png"
alt="pokeball"
class="logo">
</a>
<button id="theme-toggle-button">
<img src="./src/images/sun.png"
alt="sun image"
class="toggle-button-image">
</button>
</header>
<main>
<ul class="pokemon-list">
<li class="pokemon-card">
<div class="information">
<span>Bulbasaur</span>
<span>#0001</span>
</div>
<img src="./src/images/bulbasaur.gif" alt="Bulbasaur" class="gif">
<ul class="types">
<li class="type grass">Grass</li>
<li class="type poison">Poison</li>
</ul>
<p class="description">There is a plant seed on its back since the day this Pokémon was born. The seed grows slowly.</p>
</li>
<!-- More Pokemon cards go here -->
</ul>
</main>