Pourquoi CSS border-radius fait-il disparaître des éléments dans ce composant Angular Material Sidenav minimal ? (démo disponible)
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.
