How to make the ngx-bootstrap modal go full screen

Question

I need to create a sort of overlay to display forms that need more space in the mobile version of my webapp.

I'm trying to use ngx-bootstrap modal for that but even after using the means they offer to customize this component, I still cannot get the result I want.

This is how I applied a custom class for the modal:

ngx-bootstrap.component.ts

  goToReportOne() {
   // ...
   this.bsModalRef.setClass('full-screen-modal');
   // ...
  }

The problem is more obvious when I rotate the device (landscape mode). To make the issue clearer I assigned a different color to each section.

The blue one(the custom style applied to the modal) can be found in

styles.css

.full-screen-modal {
  height: 100vh !important;
  width: 100vw !important;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  background-color: blue;
}

The other two colors, green and orange are applied to the component I display in the modal and host container respectively

modal-one.component.scss

:host {
  width: 90vw;
  height: 90vh;
  background-color: orangered;
}

.report-one {
  background-color: green;
  width: 20rem;
  height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

I know I can easily set the width and height to 100 in the :host selector but I want to know:

1) Why doesn't the modal (in blue) occupy whole screen 2) Why is it that for the orange section applying 100% for its height and width doesn't work. Only 100vh and 100vw would make it occupy the entire screen

Here's a demo in stackblitz

Thanks