MDB ScrollSpy - with content of variable height

Expected behavior Hi I am trying to use scrollspy4 in my code. For this I am using the example code shown here to get the same behavior. However I need to make sure that the content being scrolled takes up the entire screen (100% height) as opposed to a fixed height of 12.5rem for the scrollspy-example class. To achieve this I have modified the code as shown below. However when I set the height for scrollspy-example class to auto I find that the scrollspy stops showing the correct section on scrolling the content (active class is not added to the link on scrolling). This starts to work correctly the moment I delete the the following code from my SCSS file

  .scrollspy-example {
        height: auto !important;
      }

However in this case the height of the content changes to 12.5rem. I want the scroll spy to correctly detect the scroll while at the same time filling the screen height. Please tell me how I can achieve this.

HTML

<div class="container-fluid">
  <div class="row">
    <!-- SIDE PANEL -->
    <div class="col-md-3 col-sm-4">
      <!--Grid column-->
      <!--Scrollspy-->
      <div id="abc" class="mdb-scrollspy-ex">
        <!-- Links -->
        <ul
          mdbScrollSpy="scrollspy4"
          class="mt-5 nav nav-pills default-pills smooth-scroll"
        >
          <li class="nav-item" (click)="select($event)">
            <a
              id="c1"
              [ngClass]="{ active: currentSelection === 'c1' }"
              mdbScrollSpyLink="section1"
              class="nav-link"
              >Section 1</a
            >
          </li>
          <li class="nav-item" (click)="select($event)">
            <a
              id="c2"
              [ngClass]="{ active: currentSelection === 'c2' }"
              mdbScrollSpyLink="section2"
              class="nav-link"
              >Section 2</a
            >
          </li>
          <li class="nav-item" (click)="select($event)">
            <a
              id="c3"
              [ngClass]="{ active: currentSelection === 'c3' }"
              mdbScrollSpyLink="section3"
              class="nav-link"
              >Section 3</a
            >
          </li>
          <li class="nav-item" (click)="select($event)">
            <a
              id="c4"
              [ngClass]="{ active: currentSelection === 'c4' }"
              mdbScrollSpyLink="section4"
              class="nav-link"
              >Section 4</a
            >
          </li>
        </ul>
        <!-- Links -->
      </div>
      <!--Scrollspy-->
    </div>
    <!-- MAIN SECTION -->
    <div class="col-md-9 col-sm-8">
      <!-- HEADING -->
      <div class="raleway my-4">
        <h2 id="termsofservice" class="text-center">
          <span>TERMS OF SERVICE</span>
        </h2>
      </div>
      <p class="subtext text-center">
        Last updated September 16 2019
      </p>

      <div id="main">
        <!--Spied element-->
        <div class="scrollspy-example z-depth-1 text-center p-0">
          <section
            mdbScrollSpyElement="scrollspy4"
            id="section1"
            class="p-5 blue lighten-4"
          >
            <h3>Section 1</h3>
            <p class="mb-0">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis
              iure exercitationem mollitia fugit asperiores temporibus magnam
              perspiciatis. Repellat quisquam culpa odit! Dolore non
              consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
              Laborum officiis deserunt, assumenda pariatur vel dolorum
              provident beatae tenetur nihil quo dicta eius enim cumque
              reprehenderit voluptate nam aperiam eveniet et iusto at magni.
              Necessitatibus laborum assumenda consequuntur voluptate.
              Recusandae mollitia sequi in aperiam enim nesciunt incidunt,
              cumque ut voluptates ea nam quam beatae maxime voluptatem.
              Accusamus, animi vel eaque voluptatibus ipsam odio est, minus
              obcaecati praesentium nam iure!
            </p>
          </section>
          <section
            mdbScrollSpyElement="scrollspy4"
            id="section2"
            class="p-5 red lighten-4"
          >
            <h3>Section2</h3>
            <p class="mb-0">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis
              iure exercitationem mollitia fugit asperiores temporibus magnam
              perspiciatis. Repellat quisquam culpa odit! Dolore non
              consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
              Laborum officiis deserunt, assumenda pariatur vel dolorum
              provident beatae tenetur nihil quo dicta eius enim cumque
              reprehenderit voluptate nam aperiam eveniet et iusto at magni.
              Necessitatibus laborum assumenda consequuntur voluptate.
              Recusandae mollitia sequi in aperiam enim nesciunt incidunt,
              cumque ut voluptates ea nam quam beatae maxime voluptatem.
              Accusamus, animi vel eaque voluptatibus ipsam odio est, minus
              obcaecati praesentium nam iure!
            </p>
          </section>
          <section
            mdbScrollSpyElement="scrollspy4"
            id="section3"
            class="p-5 green lighten-4"
          >
            <h3>Subsection 1B</h3>
            <p class="mb-0">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis
              iure exercitationem mollitia fugit asperiores temporibus magnam
              perspiciatis. Repellat quisquam culpa odit! Dolore non
              consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
              Laborum officiis deserunt, assumenda pariatur vel dolorum
              provident beatae tenetur nihil quo dicta eius enim cumque
              reprehenderit voluptate nam aperiam eveniet et iusto at magni.
              Necessitatibus laborum assumenda consequuntur voluptate.
              Recusandae mollitia sequi in aperiam enim nesciunt incidunt,
              cumque ut voluptates ea nam quam beatae maxime voluptatem.
              Accusamus, animi vel eaque voluptatibus ipsam odio est, minus
              obcaecati praesentium nam iure!
            </p>
          </section>
          <section
            mdbScrollSpyElement="scrollspy4"
            id="section4"
            class="p-5 indigo lighten-4"
          >
            <h3>Section 4</h3>
            <p class="mb-0">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis
              iure exercitationem mollitia fugit asperiores temporibus magnam
              perspiciatis. Repellat quisquam culpa odit! Dolore non
              consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
              Laborum officiis deserunt, assumenda pariatur vel dolorum
              provident beatae tenetur nihil quo dicta eius enim cumque
              reprehenderit voluptate nam aperiam eveniet et iusto at magni.
              Necessitatibus laborum assumenda consequuntur voluptate.
              Recusandae mollitia sequi in aperiam enim nesciunt incidunt,
              cumque ut voluptates ea nam quam beatae maxime voluptatem.
              Accusamus, animi vel eaque voluptatibus ipsam odio est, minus
              obcaecati praesentium nam iure!
            </p>
          </section>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

.mdb-scrollspy-ex .nav-item {
  width: 100%;
}

.mdb-scrollspy-ex a {
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.1rem;
  padding: 0 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  color: black;
}

#termsofservice {
  margin-top: 100px;
}
  @media (min-width: 768px){
    #abc {
      position: absolute;
      top: 0px;
      bottom: 0;
      left: 0;
      width: 25vw;
      overflow-y: scroll; 
      margin-top: 200px;
      background-color: aqua;
      height: 60vh;
      padding-left: 5px;
    }

    #main {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      overflow-y: scroll;
      margin-top: 200px;
    }
  }

  #sidebar {
    text-align: center;
    height:60vh;
  }

  #main {
    height:60vh;
  }

  .scrollspy-example {
    height: auto !important;
  }

TS

select(event) {
    console.log("Element clicked is " + event);
    const itemSelected = event.target.id;
    this.currentSelection = itemSelected;
  }

Actual behavior*

Resources (screenshots, code snippets etc.)