Puedes crear un div
dentro de tareas-contenedor
, encerrar a todo el contenido y mostrar el scroll
únicamente ahí, así el scroll
no se desbordará de tareas-contenedor
.
Entonces, primero creamos el div
adentro de tareas-contenedor
, le llamaremos contenido
, y este div
encerrará a tu h2
y a tu lista de tareas, quedando tu estructura HTML así:
<div class="tareas-contenedor">
<div class="contenido">
<h2 class="title-tareas">Mis Tareas</h2>
<ListaDeTareas />
</div>
</div>
Y a contenido
le damos los mismos estilos (solo los necesarios) que tiene tareas-contenedor
:
.contenido {
min-height: 350px;
max-height: 60vh;
min-width: 600px;
max-width: 750px;
overflow-x: auto;
}
Y los estilos del scroll
que se apliquen al nuevo div
creado:
.contenido::-webkit-scrollbar{
width: 8px;
background-color: #2546b8;
border-radius: 20px;
}
.contenido::-webkit-scrollbar:window-inactive {
display: none;
}
.contenido::-webkit-scrollbar-thumb {
background-color: #09C;
border-radius: 6px;
}
Y así el scroll
se verá solo en contenido
, y como contenido
está dentro de tareas-contenedor
, el scroll
no se desbordará de tareas-contenedor
.
Ejemplo:
.tareas-contenedor {
min-height: 350px;
max-height: 60vh;
min-width: 600px;
max-width: 750px;
text-align: start;
margin: 30px auto 0 auto;
padding: 5px;
border-radius: 25px;
background: rgba(221,221,221,0.55);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
border: 1px solid rgba(221,221,221,0.275);
overflow: hidden; /* oculto el scroll de este div porque no lo queremos visualizar */
}
.contenido {
min-height: 350px;
max-height: 60vh;
min-width: 600px;
max-width: 750px;
overflow-x: auto; /* muestro el scroll de este div, porque es el que queremos visualizar */
}
/* Barra de desplazamiento */
.contenido::-webkit-scrollbar{
width: 8px;
background-color: #2546b8;
border-radius: 20px;
}
.contenido::-webkit-scrollbar:window-inactive {
display: none;
}
.contenido::-webkit-scrollbar-thumb {
background-color: #09C;
border-radius: 6px;
}
<div class="tareas-contenedor">
<div class="contenido">
<h2 class="title-tareas">Mis Tareas</h2>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
<p>texto de ejemplo</p>
</div>
</div>