為什麼 css border-radius 會導致元素在這個最小的 Angular Material Sidenav 元件中消失？ （提供演示）

Question

這是關於 Angular Material Sidenav 元件。在下面的程式碼中，當我增加邊框半徑以便它與封閉元素重疊時，該元素就會消失。

<mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened>
    Drawer content <br />
  </mat-drawer>
  <mat-drawer-content
    style="
      border-radius: 0px; // <-- try to increase this value to see effect
      display: flex;
      flex-direction: column;
      justify-content: stretch;
      align-items: stretch;
      background-color: rgb(255, 200, 200);
    "
    >Main content</mat-drawer-content>
</mat-drawer-container>

（無邊框半徑時內容可見）

#（新增邊框半徑後內容消失）

#Stackblitz：https://stackblitz.com/edit/7swnhp?file=src/example/sidenav-drawer-overview-example.html

我看不到元素去了哪裡，看不到任何正在應用的隱藏樣式，在 DOM 中我可以看到它在那裡，但它不可見。

Answer 1

當我添加 border-raduis 時，它按預期工作，內容可見。