html - 无法使组件尊重小部件大小

Question

我已向 Gridster2 小部件添加了一个组件。当我使小部件的高度变短时，组件容器不考虑小部件的大小，即当小部件减小时组件容器的大小不会减小。

我不确定某些 Gridster2 小部件样式是否覆盖了我的组件样式。

这是 Stackblitz 上的应用程序：https ://stackblitz.com/edit/angular-gridster12345

我在 stackblitz 应用程序中以红色突出显示了组件容器。容器类是“notification-widget__container”（见下文）

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