Scroll internal content div with Ionic edge

Question

How to make the internal content of a div specific has scroll when the text is larger than the area?

I was suggested to use the following code:

html:

<ion-content id="contrato">
  <div class="main">
    <div class="head">
      <ion-grid>
        <ion-row>
          <img src="assets/imgs/logo.png" alt="" class="logo">
        </ion-row>
        <ion-row>
          <div class="title">Termos e Condições/Política de Privacidade</div>
        </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>

</ion-content>
<ion-footer>
  <div class="footer">
    <ion-grid>
      <ion-row>
        <ion-col class="check" align-self-center>
          <ion-checkbox [(ngModel)]="concorda"></ion-checkbox>
        </ion-col>
        <ion-col col-10 class="msg_col">
          <h4 class="confirm_msg">Eu li e concordo com os Termos e Condições/Política
        de Privacidade.
          </h4>
        </ion-col>
      </ion-row>
    </ion-grid>
    <button ion-button [disabled]="!concorda" class="send" full large>Finalizar</button>
  </div>
</ion-footer>

css:

page-contrato {
    #contrato {
        .main {
            .head {

                .logo {
                    height: 50pt;
                }

                .title {
                    padding: 1.6rem 0;
                    font-size: 4.5vw;
                }

                ion-row {
                    display: flex;
                    justify-content: center;
                }
            }

            .inner {
                padding: 1.7rem;
                max-height: 100%;

                .inner-main {
                    border: 1.5pt solid black;
                    text-align: justify;
                    overflow-y: auto scroll;
                }
            }

            .footer {
                margin-top: auto;
                margin-bottom: 0%;

                .check {
                    text-align: center;
                    padding-left: 2.2rem;
                }

                .msg_col {
                    text-align: justify;
                    padding-right: 2.2rem;
                }

                .confirm_msg {
                    font-size: 3vw;
                }

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

}

But this solution does not solve the problem, so scrolla all central content, including div with edge. In addition to getting that separation mark down because of the <ion-footer> which is not the intention.

The intention is to have the scroll only in the internal content to divwith edge, if this content exceeds the maximum size of this div.

Answer 1

Answering my own question

After searching and grieving for some time, I managed 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 class .inner and .inner-main. Despite defining a top, bottom, left and right equal to 0 in class .inner-main, if not defined width and height = 100% the text goes beyond the limits of div .inner and takes up all the available screen.

Thus, if the internal text is larger than the space bounded by div she has the scrollonly in that region. And does not need a <ion-footer> and a <ion-header>.