Why does css border-radius cause elements to disappear in this minimal Angular Material Sidenav component? (demo available)

Question

This is about Angular Material Sidenav component. In the code below, when I increase the border radius so that it overlaps the enclosing element, the element disappears.

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

(Content is visible when there is no border radius)

(The content disappears after adding the border radius)

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

I can't see where the element goes, I can't see any hidden styles being applied, in the DOM I can see it's there but it's not visible.

Answer 1

When I add border-raduis it works as expected and the content is visible.