aside element does not take 100% height of parent div

Question

I am using a MudDrawer (MudBlazor) in a Blazor C# project. The layout has a list on the left, a map on the right, and a table at the bottom. The map has a drawer to show/hide many layers. The problem is the map's drawer does not take 100% of the parent's height. Instead, it takes all height of the page.

The code looks like this:

<div class="mud-drawer-open-persistent-right mud-drawer-right-clipped-never">                                                
    <aside>drawer content</aside>
    <div>map content</div>
</div>

I add position:relative and float:right for the aside and somehow it worked.

But when I close the drawer, the content on the right becomes a mess. The drawer should disappear completely. Is there any way to set the CSS to the aside to fix this?