Configure list-group with scrollspy bootstrap

2

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.

    
asked by anonymous 21.03.2018 / 23:03

2 answers

1

I think with CSS you will not be able to do this, because the dimensions of other divs may vary and CSS will not know how to handle it.

With jQuery you can do this with ease. First fit in CSS to div class, setting overflow: auto and setting height: 0; :

.block_demarcacaolista{
   height: 0;
   border-style: solid;
   border-width: 2px;
   border-color: brown;
   overflow: auto;
}

Then add the script below on the page:

$(document).ready(function(){

   $(window).on("scroll resize", function(){

      var winHeight = window.innerHeight, // altura da janela
          antOffset = $(".block_demarcacaolista")
                      .prev("div")
                      .offset().top, // distância da div anterior até o topo da janela
          antHeight = $(".block_demarcacaolista")
                      .prev("div")
                      .outerHeight(true), // altura da div anterior
          divHeight = winHeight-(antOffset+antHeight); // altura que a div poderá ter

      if(divHeight < 150) divHeight = 150; // define uma altura mínima de 150px

      $(".block_demarcacaolista").css({
         "height":
         (window.innerWidth > 767 ?
         divHeight-20+"px":
         "auto") // "20" é o espaço até o bottom da janela. Você pode ajustar se quiser
      });
   }).trigger("scroll");

});

See working:

$(document).ready(function(){
   
   $(window).on("scroll resize", function(){
      
      var winHeight = window.innerHeight, // altura da janela
          antOffset = $(".block_demarcacaolista")
                      .prev("div")
                      .offset().top, // distância da div anterior até o topo da janela
          antHeight = $(".block_demarcacaolista")
                      .prev("div")
                      .outerHeight(true), // altura da div anterior
          divHeight = winHeight-(antOffset+antHeight); // altura que a div poderá ter

      if(divHeight < 150) divHeight = 150; // define uma altura mínima de 150px

      $(".block_demarcacaolista").css({
         "height":
         (window.innerWidth > 767 ?
         divHeight-20+"px":
         "auto") // "20" é o espaço até o bottom da janela. Você pode ajustar se quiser
      });
   }).trigger("scroll");
   
});
.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: 0;
border-style: solid;
border-width: 2px;
border-color: brown;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<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>
    
22.03.2018 / 01:17
1

Eduardo did not quite understand what you want exactly. But on the problem of the Scroll you can solve yes by placing a "fixed" height

The comments I make is that you can use a minimum or maximum height in div in this way that will work:

.block_demarcacaolista {
    max-height: 30vh;
    overflow-y: auto;
}

And you can also do Midias Querys for the height of this div also in this way for example.

@media only screen and (min-height: 600px){
    .block_demarcacaolista {
        height: 200px;
        overflow-y: auto;
    }
}

On the Scrollspy I did not understand what you want, but the anchors are working, I did not change anything in HTML just those few CSS lines in .block_demarcacaolista

See the example working.

<!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>

    <style>
    .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;
}

.block_demarcacaolista {
    max-height: 50vh;
    overflow-y: auto;
}
    </style>

</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>
    
22.03.2018 / 13:29