У меня возникла проблема с переполнением (прокруткой) и перекрывающимися элементами div. ⇐ CSS

[Anonymous]

В настоящее время у меня возникла проблема с пользовательским интерфейсом.
[Исходный код (не полный, вставлен только для того, чтобы не обойти рекомендации stackoverflow)]

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

body {
background: none !important;
}

* {
font-family: "Open Sans", sans-serif;
font-weight: 500;
color: rgb(9, 9, 9);
}

html, body {
height: 100%;
margin: 0;
}

#nui {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(240, 240, 240);

display: flex;
justify-content: center;
align-items: center;
}

#screen {
width: 65%;
height: 70%;
background-color: white;

border: 1px solid rgb(228, 228, 228);
border-radius: 15px;

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
nav {
max-height: 7.5%;
width: 100%;

border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 1px solid rgb(228, 228, 228);

display: flex;
justify-content: space-between;
align-items: center;
}

#profile {
width: 13%;
margin-left: 1%;

border-top-left-radius: 30px;
border-bottom-left-radius: 30px;

display: flex;
align-items: center;

border: 1px solid rgb(228, 228, 228);
border-top: none;
border-bottom: none;

cursor: pointer;
}

#profile-picture {
border-radius: 50%;
}

#name {
width: 100%;
text-align: center;
}

#close {
width: 13%;
font-size: 30px;
text-align: right;
margin-right: 1%;
}

#close > i {
cursor: pointer;
color: red;
}

#title {
font-weight: 600;
}

main {
height: 100%;
width: 100%;

display: flex;
justify-content: center;
align-items: center;
}

#tasks {
width: 97%;
height: 95%;

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 1%;

overflow-y: scroll;
}

.task-card {
background-color: white;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

border: 1px solid rgb(228, 228, 228);
border-radius: 10px;

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.info {
width: 92%;
height: 70%;

display: flex;
flex-direction: column;
justify-content: space-between;  /* This line evenly spaces elements vertically */
}

.infoElement {
display: flex;
justify-content: space-between;
align-items: center;
}

.label {
font-size: 14px;
color: rgb(113, 113, 113);
}

.acceptContainer {
margin-top: 1%;
width: 92%;
height: 15%;
display: flex;
flex-direction: column;
justify-content: end;
}

.accept {
width: 100%;
height: 90%;

border-radius: 5px;
border: none;

background-color: rgb(24, 24, 24);

color: white;
font-weight: 600;
font-size: 15px;

cursor: pointer;
}

.accept:hover {
background-color: rgb(47, 47, 47);
}

p {
padding: 0;
margin: 0;
}

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

[i]
Egil Cujick

GoPostal

[/i]









Area

Downtown




Distance

10km




Est.  Duration

30 minutes




Pick-Ups

5




Drop-Offs

3




Reward

$50




XP

100




Truck

Van




Accept

Полный исходный код
Итак Я хочу, чтобы карточки задач всегда находились внутри основного тега. Иногда будет только одна карта задач, иногда 20, поэтому я хочу, чтобы у нее был свиток, но только внутри основного. Надеюсь, вы понимаете, но я также думаю, что легко понять, в чем моя проблема.
Также, если у вас есть другие предложения по моему дизайну, не против поделиться ими.

Подробнее здесь: https://stackoverflow.com/questions/786 ... pping-divs