Good evening! I'm having difficulty with one of the layouts of my project in which I have a div divided into 3 parts, where the upper right part will contain selected cards that will bring the data in a list at the bottom, I'm building the interface still, and in tests that I'm doing this, I want this div to fit the computer screen, and the list has a scroll bar, the way my code is below the list goes beyond the size of the screen:
<!DOCTYPE html> <!-- page 2-->
<html lang="pt">
<head>
<!-- metas obrigatórios para o bootstrap para compatibilidades-->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- LINK OBRIGATÓRIOS PARA BOOTSTRAP, SWEETALERT2 E ANIMATE.CSS-->
<link href="node_modules/bootstrap/compiler/bootstrap.css" rel="stylesheet" />
<link href="node_modules/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet" />
<link href="node_modules/animate.css/animate.min.css" rel="stylesheet" />
<link href="node_modules/bootstrap/compiler/style.css" rel="stylesheet" />
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home Page</title>
</head>
<body>
<div class="container-fluid my-3 block_demarcacao0">
<div class="row block_demarcacao">
<div class="col-md-9 block_demarcacaol">
<!--linha 1 dos cards -->
<div class="row block_demarcacao">
<!--card 1-->
<div class="col-md-3 my-2 ml-1">
<div class="card">
<div class="card-body block__card--aguardando">
<p class="card-title block__card--title">
Aguardando atendimento
</p>
<div class="row block__card--dados">
<div class="col align-right">
<i class="fa fa-flag"></i>
</div>
<div class="col align-left">
<p class="text-right">5</p>
</div>
</div>
</div>
</div>
</div>
<!--card 2-->
<div class="col-md-3 my-2 ml-1">
<div class="card">
<div class="card-body block__card--pausa">
<p class="card-title block__card--title">
Em Pausa
</p>
<div class="row block__card--dados">
<div class="col align-right">
<i class="fa fa-pause"></i>
</div>
<div class="col align-left">
<p class="text-right">12</p>
</div>
</div>
</div>
</div>
</div>
<!--card 3-->
<div class="col-md-3 my-2 ml-1">
<div class="card">
<div class="card-body block__card--feedback">
<p class="card-title block__card--title">
Aguardando Feedback
</p>
<div class="row block__card--dados">
<div class="col align-right">
<i class="fa fa-deaf"></i>
</div>
<div class="col align-left">
<p class="text-right">3</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--linha 2 dos cards-->
<div class="row block_demarcacao">
<div class="col-md-3 my-2 ml-1">
<div class="card">
<div class="card-body block__card--homologacao">
<p class="card-title block__card--title">
Em Homologação
</p>
<div class="row block__card--dados">
<div class="col align-right">
<i class="fa fa-bug"></i>
</div>
<div class="col align-left">
<p class="text-right">5</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 my-2 ml-1">
<div class="card">
<div class="card-body block__card--agendado">
<p class="card-title block__card--title">
Agendados
</p>
<div class="row block__card--dados">
<div class="col align-right">
<i class="fa fa-calendar-check-o"></i>
</div>
<div class="col align-left">
<p class="text-right">5</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--FIM DOS CARDS -->
<!--LISTA DE CHAMADOS -->
<div class="row block_demarcacaolista">
<div class="container-fluid list-group" data-spy="scroll">
<div class="row list-group-item">
<div class="row">
<div class="col-md-2 ml-1">
<a href="#" class="list-goup-item">#36985</a>
</div>
<div class="col-md-2 ml-1">
<span>Integração WIS</span>
</div>
<div class="col-md-2 ml-1">
<span>Eduardo</span>
</div>
<div class="col-md-2 ml-1">
<span>3:30</span>
</div>
<div class="progress">
<div class="progress-bar" style="width:70%">3:30000000</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ml-1">
<span>Retrabalho</span>
</div>
<div class="col-md-2 ml-1">
<span>Bruno Luzardi</span>
</div>
<div class="col-md-2 ml-1">
<span>WMS - Integração</span>
</div>
<div class="col-md-2 ml-1">
<span>06 dias</span>
</div>
</div>
</div>
<div class="row list-group-item">
<div class="row">
<div class="col-md-2 ml-1">
<a href="#" class="list-goup-item">#36985</a>
</div>
<div class="col-md-2 ml-1">
<span>Integração WIS</span>
</div>
<div class="col-md-2 ml-1">
<span>Eduardo</span>
</div>
<div class="col-md-2 ml-1">
<span>3:30</span>
</div>
<div class="progress">
<div class="progress-bar" style="width:70%">3:30000000</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ml-1">
<span>Retrabalho</span>
</div>
<div class="col-md-2 ml-1">
<span>Bruno Luzardi</span>
</div>
<div class="col-md-2 ml-1">
<span>WMS - Integração</span>
</div>
<div class="col-md-2 ml-1">
<span>06 dias</span>
</div>
</div>
</div>
<div class="row list-group-item">
<div class="row">
<div class="col-md-2 ml-1">
<a href="#" class="list-goup-item">#36985</a>
</div>
<div class="col-md-2 ml-1">
<span>Integração WIS</span>
</div>
<div class="col-md-2 ml-1">
<span>Eduardo</span>
</div>
<div class="col-md-2 ml-1">
<span>3:30</span>
</div>
<div class="progress">
<div class="progress-bar" style="width:70%">3:30000000</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ml-1">
<span>Retrabalho</span>
</div>
<div class="col-md-2 ml-1">
<span>Bruno Luzardi</span>
</div>
<div class="col-md-2 ml-1">
<span>WMS - Integração</span>
</div>
<div class="col-md-2 ml-1">
<span>06 dias</span>
</div>
</div>
</div>
<div class="row list-group-item">
<div class="row">
<div class="col-md-2 ml-1">
<a href="#" class="list-goup-item">#36985</a>
</div>
<div class="col-md-2 ml-1">
<span>Integração WIS</span>
</div>
<div class="col-md-2 ml-1">
<span>Eduardo</span>
</div>
<div class="col-md-2 ml-1">
<span>3:30</span>
</div>
<div class="progress">
<div class="progress-bar" style="width:70%">3:30000000</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ml-1">
<span>Retrabalho</span>
</div>
<div class="col-md-2 ml-1">
<span>Bruno Luzardi</span>
</div>
<div class="col-md-2 ml-1">
<span>WMS - Integração</span>
</div>
<div class="col-md-2 ml-1">
<span>06 dias</span>
</div>
</div>
</div>
<div class="row list-group-item">
<div class="row">
<div class="col-md-2 ml-1">
<a href="#" class="list-goup-item">#36985</a>
</div>
<div class="col-md-2 ml-1">
<span>Integração WIS</span>
</div>
<div class="col-md-2 ml-1">
<span>Eduardo</span>
</div>
<div class="col-md-2 ml-1">
<span>3:30</span>
</div>
<div class="progress">
<div class="progress-bar" style="width:70%">3:30000000</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ml-1">
<span>Retrabalho</span>
</div>
<div class="col-md-2 ml-1">
<span>Bruno Luzardi</span>
</div>
<div class="col-md-2 ml-1">
<span>WMS - Integração</span>
</div>
<div class="col-md-2 ml-1">
<span>06 dias</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 block_demarcacaol">
<span>Aqui fica o SATI em atendimento</span>
</div>
</div>
</div>
<!--Componentes opcionais mas importantissimos sempre seguindo essa ordem jquery, popper, bootstrap-->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<script src="js/scriptsSweet.js"></script>
</body>
CSS
.block--footer{
position:absolute;
bottom:0;
width:100%;
}
.block--navbar{
background-color: #030040;
}
.block__logo{
width: 100%;
height: 150px;
}
.block__input{
margin-top: 15px;
}
.block__btnprimary{
margin-top: 15px;
width: 100%;
font-size: 20px;
background: white;
color: blue;
border-style: solid;
border-width: 1px;
border-color: blue;
}
.block--navbar__logo{
width: 100px;
height: 35px;
}
.block--navbar__link {
font-size: 18px;
color: rgba($black, .5);
}
.block--navbar__icon {
font-size: 60px;
color: rgba($black, .5);
}
.block--navbar__link:hover {
font-size: 21px;
color: rgba($primaryDark, .8);
.block--navbar__icon{ color: rgba(blue, 0.8)};
}
.block--navbar__profile{
font-size: 23px;
color: rgba($black, .5);
}
.block__card{
width: 180px;
height: 100px;
text-align: end;
min-width: 50px;
font-size: 11px;
color: white;
border-radius: 5px 5px 5px 5px;
border: 0ch;
}
.block__card:hover{
opacity: 0.8;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.block__card--pausa{
@extend .block__card;
background-color: rgb(138, 138, 4);
}
.block__card--agendado{
@extend .block__card;
background-color: rgb(228, 61, 32);
}
.block__card--aguardando{
@extend .block__card;
background-color: blue;
}
.block__card--feedback{
@extend .block__card;
background-color: rgb(11, 152, 207);
}
.block__card--homologacao{
@extend .block__card;
background-color: rgb(40, 5, 73);
}
.block__card--dados{
font-size: 22px;
text-align: start;
}
.block_demarcacao{
border-style: solid;
border-width: 2px;
border-color: #030040;
}
.block_demarcacaol{
border-style: solid;
border-width: 2px;
border-color: #BF622D;
}
.block_demarcacao0{
border-style: solid;
border-width: 2px;
border-color: brown;
}
.block_demarcacaolista{
height: 350px;
border-style: solid;
border-width: 2px;
border-color: brown;
}
As it is it displays the 3 parts more or less as I need it, but I'm not able to limit their size, in this case, the div that will contain the list of calls by category.
I fixed the size of the bottom div just to try to force scrollspy, but without success.