Scroll inner content div with Ionic border

Answering my own question

After searching and punishing for some time, I was able to find a satisfactory solution to my problem.

html:

<ion-content id="contrato">
  <div class="main">
    <div class="head">
      <ion-grid>
        <ion-row>
          <ion-col text-center>
            <img src="assets/imgs/logo.png" alt="" class="logo">
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col text-center>
            <div class="title">Termos e Condições/Política de Privacidade</div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
    <div class="inner">
      <div class="inner-main">
        <h3>TERMOS E CONDIÇÕES:</h3>
        <p>
          1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis eros quis arcu vulputate ultricies.
      Fusce sodales finibus massa, eget hendrerit erat ultrices eu. Ut blandit tincidunt mattis. Suspendisse id
      varius diam. Quisque eget tincidunt ante, sed sodales neque. Nulla quis libero eleifend, ultricies justo
      scelerisque, ultricies odio. Vestibulum sit amet justo dui. Nunc rutrum diam velit, accumsan dictum elit
      dignissim in. Maecenas vitae eros pellentesque, sollicitudin nunc congue, commodo velit. Fusce ut semper
      risus. Nullam bibendum, nisi et mattis pretium, arcu nulla ultrices magna, non suscipit nibh augue non magna.
      Duis maximus lorem eget nibh fermentum, et ultricies nisl efficitur. Nam ac libero orci.
        </p>
        <p>
          2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis eros quis arcu vulputate ultricies.
      Fusce sodales finibus massa, eget hendrerit erat ultrices eu. Ut blandit tincidunt mattis. Suspendisse id
      varius diam. Quisque eget tincidunt ante, sed sodales neque. Nulla quis libero eleifend, ultricies justo
      scelerisque, ultricies odio. Vestibulum sit amet justo dui. Nunc rutrum diam velit, accumsan dictum elit
      dignissim in. Maecenas vitae eros pellentesque, sollicitudin nunc congue, commodo velit. Fusce ut semper
      risus. Nullam bibendum, nisi et mattis pretium, arcu nulla ultrices magna, non suscipit nibh augue non magna.
      Duis maximus lorem eget nibh fermentum, et ultricies nisl efficitur. Nam ac libero orci.
        </p>
        <p>
          3) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis eros quis arcu vulputate ultricies.
      Fusce sodales finibus massa, eget hendrerit erat ultrices eu. Ut blandit tincidunt mattis. Suspendisse id
      varius diam. Quisque eget tincidunt ante, sed sodales neque. Nulla quis libero eleifend, ultricies justo
      scelerisque, ultricies odio. Vestibulum sit amet justo dui. Nunc rutrum diam velit, accumsan dictum elit
      dignissim in. Maecenas vitae eros pellentesque, sollicitudin nunc congue, commodo velit. Fusce ut semper
      risus. Nullam bibendum, nisi et mattis pretium, arcu nulla ultrices magna, non suscipit nibh augue non magna.
      Duis maximus lorem eget nibh fermentum, et ultricies nisl efficitur. Nam ac libero orci.
        </p>
        <p>
          4) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis eros quis arcu vulputate ultricies.
      Fusce sodales finibus massa, eget hendrerit erat ultrices eu. Ut blandit tincidunt mattis. Suspendisse id
      varius diam. Quisque eget tincidunt ante, sed sodales neque. Nulla quis libero eleifend, ultricies justo
      scelerisque, ultricies odio. Vestibulum sit amet justo dui. Nunc rutrum diam velit, accumsan dictum elit
      dignissim in. Maecenas vitae eros pellentesque, sollicitudin nunc congue, commodo velit. Fusce ut semper
      risus. Nullam bibendum, nisi et mattis pretium, arcu nulla ultrices magna, non suscipit nibh augue non magna.
      Duis maximus lorem eget nibh fermentum, et ultricies nisl efficitur. Nam ac libero orci.
        </p>
      </div>
    </div>
    <div class="acptMsg">
      <ion-grid class="grid">
        <ion-row justify-content-center>
          <ion-col col-1 align-self-center>
            <ion-checkbox [(ngModel)]="concorda" class="checkbox"></ion-checkbox>
          </ion-col>
          <ion-col col-8>
            <div class="confirm_msg">Eu li e concordo com os Termos e Condições/Política de Privacidade.
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>

    <div class="send_div">
      <button ion-button [disabled]="!concorda" class="send_button" full large>Finalizar</button>
    </div>
  </div>

</ion-content>

css:

page-contrato {
    #contrato {
        .main {
            height: 100%;
            width: 100%;
            text-align: center;

            .head {
                text-align: center;
                height: 20vh;
                top: 0;

               .logo {
                   height: 10vh;
               }

                .title {
                    padding: 0.7rem 0;
                    font-size: 4.3vw;
                }

            }

            .inner {
                top: 20vh;
                bottom: auto;
                height: 60vh;
                width: 90vw;
                margin: 0 5vw;
                border: 1.5pt solid black;

                .inner-main {
                    top: 0;
                    bottom:0;
                    left: 0;
                    right: 0;
                    width: 100%;
                    height: 100%; 
                    text-align: justify;
                    overflow: auto;
                }
            }

            .acptMsg {
                top: 0;
                height: 8vh;
                max-height: 100%;
                width: 100%;
                margin-bottom: 0;

                .grid {
                    margin-top: 10px;
                    margin-bottom: 0px;
                    height: 100%;
                    width: 100%;
                }

                .confirm_msg {
                    font-size: 2vh;
                    text-anchor: start;
                    text-align: justify;
                }
            }
            .send_div {
                position: fixed;
                width: 100%;
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;

               .send_button {
                    color: white;
                    margin-top: 2rem;
                    margin-bottom: 0;
                    background-color: color($colors, blue);
                    font-size: 1.6rem;
                    font-weight: 500;
                }
            }
        }
    }

}

The solution is in the .inner and .inner-main class. Although you set top , bottom , left , and right equal to 0 to class .inner-main , if not set width and height = 100% text goes out of bounds div .inner and starts to occupy the entire screen available.

Thus, if the internal text is greater than the space delimited by div it has the scroll only in that region. And you do not need <ion-footer> and <ion-header> .