Pourquoi CSS border-radius fait-il disparaître des éléments dans ce composant Angular Material Sidenav minimal ? (démo disponible)

Question

Il s'agit du composant Angular Material Sidenav. Dans le code ci-dessous, lorsque j'augmente le rayon de la bordure afin qu'il chevauche l'élément englobant, l'élément disparaît.

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

(le contenu est visible lorsqu'il n'y a pas de rayon de bordure)

(Le contenu disparaît après l'ajout du rayon de la bordure)

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

Je ne vois pas où va l'élément, je ne vois aucun style caché appliqué, dans le DOM je peux voir qu'il est là mais il n'est pas visible.

Answer 1

Lorsque j'ajoute border-raduis, cela fonctionne comme prévu et le contenu est visible.