Height and width in Percentage is not working for cdk-virtual-scroll-viewport

Question

I have a cdk-virtual-scroll-viewport in my application where height and width are provided in percentage.

  <div class="wrapper">
   <cdk-virtual-scroll-viewport itemSize="5" class="table-viewport">
   ...

  .wrapper {
    height: 100%;
    width: 100%;
  }

  cdk-virtual-scroll-viewport {
  height: 80%;
  width: 80%;
  border: 1px solid #e6e8f0;
  border-radius: 0.5%;
  /* box-shadow: 1px 100px black; */
  }

But it's not working. There is nothing visible on the screen. It works when we give the height and width in px .

cdk-virtual-scroll-viewport {
  height: 800px;
  width: 1300px;
  border: 1px solid #e6e8f0;
  border-radius: 0.5%;
  /* box-shadow: 1px 100px black; */
  }

Could anyone figure out what's happening?

Answer 1

The overscroll-behavior css property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll-behavior-x and overscroll-behavior-y .

overscroll-behavior: auto;