How to fix top element under Appbar and the rest scroll-able?

Issue

I would like to have a fixed card above my scrollable cards.

I have tried with different settings of overflow and position:fixed but I could not achieve the followings:

• top card shall be fixed
• below cards shall be scrollable without specifying the height

My problem is I would like the container for the list of Card would fill the rest space without specifying the height of the container with bottom-padding.

what i have tried: https://try.mudblazor.com/snippet/mEwdlGYyoWVMwFtI

<MudAppBar Color="Color.Primary" Fixed="true" >
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />
    <MudSpacer />
    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" />
</MudAppBar>

<MudGrid Spacing="2" Style="margin-top:86px;">
    <MudItem xs="12">
        <MudCard>
            <MudCardContent>
                <MudText>Story of the day</MudText>
                <MudText Typo="Typo.body2">The quick, brown fox jumps over a lazy dog.</MudText>
            </MudCardContent>
            <MudCardActions>
                <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
            </MudCardActions>
        </MudCard>
    </MudItem>

    <MudItem xs="12">
        <MudDivider></MudDivider>
    </MudItem>

    <div class="pa-3 overflow-scroll" style="height:200px; width:100%">
        @for (int i = 0; i < 20; i++)
        {
            <MudItem xs="12">
                <MudCard>
                    <MudCardContent>
                        <MudText>Story of the day</MudText>
                        <MudText Typo="Typo.body2">The quick, brown fox jumps over a lazy dog.</MudText>
                    </MudCardContent>
                    <MudCardActions>
                        <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
                    </MudCardActions>
                </MudCard>
            </MudItem>
        }
    </div>
    
</MudGrid>

Solution

You can use max-height to set the boundary for the scroll to start.

<MudAppBar Color="Color.Primary" Fixed="true" >
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />
    <MudSpacer />
    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" />
</MudAppBar>

<MudGrid Spacing="2" Style="margin-top:86px;"> 
    <MudItem xs="12">
        <MudCard>
            <MudCardContent>
                <MudText>Story of the day</MudText>
                <MudText Typo="Typo.body2">The quick, brown fox jumps over a lazy dog.</MudText>
            </MudCardContent>
            <MudCardActions>
                <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
            </MudCardActions>
        </MudCard>
    </MudItem>
    <MudItem xs="12">
        <MudDivider></MudDivider>
    </MudItem>
    <MudItem xs="12" Class="overflow-auto" Style="max-height:60vh;">
        @foreach(var item in _items)
        {
                <MudCard Class="ma-2">
                    <MudCardContent>
                        <MudText>Card:@item </MudText>
                        <MudText Typo="Typo.body2">The quick, brown fox jumps over a lazy dog.</MudText>
                    </MudCardContent>
                    <MudCardActions>
                        <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
                    </MudCardActions>
                </MudCard>
        }
    
    </MudItem>
</MudGrid>

<MudButton Class="mt-4" OnClick="HandleClick" Variant="Variant.Filled" Color="Color.Success">Add item</MudButton>
@code{
    List<string> _items = new(){"1"};

    void HandleClick()
    {
        _items.Add($"{_items.Count}");
    }
}

MudBlazor Snippet

Answered By - RBee