cdk-virtual-scroll-viewport height equal to page height (height 100%)

Question

Trying to get cdk-virtual-scroll-viewport height to be equal to page height.

<div class="plServiceItemsList-list">
    <cdk-virtual-scroll-viewport class="plServiceItemsList-listViewPort" itemSize="20">

When trying to use height 100%, I see no list

.plServiceItemsList-listViewPort {
  height: 100%;
  min-height: 100%;
}

The only way it will be displayed is specifying a height:

.plServiceItemsList-listViewPort {
  height: 100px;
}

But this is not dynamic.

Answer 1

After @Chellappan suggested using vh, I thought my issue was solved, but actually, when the page size what bigger than the screen, it failed.

This is what I used:

.plServiceItemsList-listContainer {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.plServiceItemsList-listViewPort {
  flex-grow: 1;
}