带固定工具栏的 MudBlazor 可滚动内容

Question

I want achieve the following result using the MudBlazor library.

1. The (A) element i want to be a MudToolBar with secondary color pinned in the top of the Container
2. The (C) element i want it to be a MudToolBar again stuck in the bottom of the Container
3. The (B) element i want it to be a Scrollable container with whatever i put inside. When i scroll it, the elements A && C MUST not scroll along with the content.

All of that is diplayed inside a Drawer's main content

<MudMainContent>
        <MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0">
            <MudLayout>
                // Here i will write the whole component
            </MudLayout>
        </MudPaper>
    </MudMainContent>

Up to now i have done the following

<div class="d-flex flex-grow-1 flex-row">
    <MudPaper Elevation="25" Class="flex-grow-1">
        <MudToolBar> 
            A-Element
        </MudToolBar>


   <div class="d-flex flex-column" style="max-height:100vh;min-height:100vh; overflow:scroll;">
            // Here there will be a ForEach loop creating elements B-Element
    </div>
    <MudPaper Elevation="25" Class="d-flex flex-row px-2 mx-4" Style="">
         C-Element
    </MudPaper>
    </MudPaper>
</div>

How can i do that??

Answer 1

Try this:

<div class="d-flex flex-column" style="height:100vh; overflow-x:auto;">
            // Here there will be a ForEach loop creating elements B-Element
</div>

Answer 2

with the same Condition I found this solution useful:

<MudPaper Class="d-flex flex-column overflow-x-auto " Height="100vh">
    Your Content
</MudPaper>

for more information you can read these:

1. Enable Flexbox in MudBlazor
2. Flex Direction in MudBlazor
3. Overflow in MudBlazor

I read this answer and then I wrote my solution based on it.