unable to make component respect widget size

Question

I have added a component to a Gridster2 widget. When I make the widget shorter in height, the component container does not respect the size of the widget, i.e. the component container does not reduce in size when the widget is reduced in size.

I am unsure whether some Gridster2 widget styles are overriding my component styles.

Here is the application on Stackblitz: https://stackblitz.com/edit/angular-gridster12345

I have highlighted the component container in red on the stackblitz application. The container class is 'notification-widget__container' (see below)

<div class="notification-widget__container">
  <h4>NotificationWidgetComponent</h4>
  <section class="notification-widget__content">
    <notification></notification>
  </section>
</div>

.notification-widget__container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 450px;
    margin: 45px 10px 10px;
    border: red solid 1px;
    overflow-y: auto;

  }
  .notification-widget__content {
    margin: 10px 5px;
  }