为什么 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%2Fexample%2Fsidenav-drawer-overview-example.html

我看不到元素去了哪里，看不到任何正在应用的隐藏样式，在 DOM 中我可以看到它在那里，但它不可见。

Answer 1

当我添加 border-raduis 时，它按预期工作，内容可见。