Полоса прокрутки не отображается внутри div в React ⇐ CSS

[Anonymous]

Я пытаюсь реализовать вертикальную полосу прокрутки в своем приложении React внутри определенного div (.thelist), где отображаются задачи. Несмотря на настройку overflow-y: auto и фиксированную высоту, полоса прокрутки либо не отображается, либо задачи переполняют контейнер.
Вот соответствующий код:
Ниже приведен мой компонент ListNote.js:

Код: Выделить всё

function ListNote({ title, onDelete, onEdit, id }) {
return (


{title}


onEdit(id)}>Edit

onDelete(id)}>Delete



);
}

CSS:

Код: Выделить всё

`.thelist {
padding: 8px;
height: 300px;
overflow-y: auto;
}

.task-item {
display: flex;
justify-content: space-between;
align-items: center;
background: #8758ff;
border-radius: 10px;
padding: 5px 15px 5px 15px;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3),
0 5px 15px rgba(0, 0, 0, 0.2);
max-width: 80%;
margin-left: auto;
margin-right: auto;

}
.task-name {
color: #fff;
}`
У меня также есть заголовок, содержащий заголовок, который должен оставаться вверху.

Подробнее здесь: https://stackoverflow.com/questions/790 ... v-in-react