百分比中的高度和寬度不適用於 cdk-virtual-scroll-viewport

Question

我的應用程序中有一個cdk-virtual-scroll-viewport ，其中高度和寬度以百分比形式提供。

  <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; */
  }

但它不起作用。 屏幕上沒有任何可見的東西。 當我們在px中給出height和width時，它就起作用了。

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

誰能弄清楚發生了什么？

Answer 1

overscroll-behavior css屬性設置瀏覽器到達滾動區域邊界時的行為。 它是overscroll-behavior-x和overscroll-behavior-y的簡寫。

overscroll-behavior: auto;