Warum führt der CSS-Randradius dazu, dass Elemente in dieser minimalen Angular Material Sidenav-Komponente verschwinden? (Demo verfügbar)

Question

Hier geht es um die Angular Material Sidenav-Komponente. Wenn ich im folgenden Code den Randradius vergrößere, sodass er das umschließende Element überlappt, verschwindet das Element.

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

(Inhalt ist sichtbar, wenn kein Randradius vorhanden ist)

(Inhalt verschwindet nach dem Hinzufügen eines Randradius)

Stackblitz: https://stackblitz.com/edit/7swnhp?file=src%2Fexample%2Fsidenav-drawer-overview-example.html

Ich kann nicht sehen, wohin das Element geht, ich kann keine versteckten Stile sehen, die angewendet werden, im DOM kann ich sehen, dass es da ist, aber es ist nicht sichtbar.

Answer 1

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