How to fix the MudTabPanel when scrolling

Question

The contents of the MubTab are scrollable. However I want the Text at the top to be fixed so that as I scroll is continues to be visible. This is what I recreated https://try.mudblazor.com/snippet/cawnluPQQVnxKMZB

<MudTabs Position="Position.Top"  PanelClass="pt-2" Style="height:320px; overflow-y: scroll">
    <MudTabPanel Text="Item One">
        <MudText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl purus in mollis. 
            Gravida arcu ac tortor dignissim convallis aenean. Sit amet cursus sit amet dictum sit
            amet justo donec. Hac habitasse platea dictumst vestibulum rhoncus. Luctus venenatis 
            lectus magna fringilla urna porttitor rhoncus dolor purus. In hendrerit gravida rutrum
            quisque. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Lectus mauris 
            ultrices eros in cursus. Egestas egestas fringilla phasellus faucibus. Tortor pretium
            viverra suspendisse potenti nullam ac tortor vitae. Vulputate dignissim suspendisse 
            in est ante in. Donec adipiscing tristique risus nec feugiat in fermentum. Eros in 
            cursus turpis massa tincidunt dui ut ornare lectus. Tempus iaculis urna id volutpat
            lacus. In aliquam sem fringilla ut. Mauris commodo quis imperdiet massa tincidunt nunc
            pulvinar. Vitae nunc sed velit dignissim sodales ut eu sem integer.
        </MudText>
            <MudText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl purus in mollis. 
            Gravida arcu ac tortor dignissim convallis aenean. Sit amet cursus sit amet dictum sit
            amet justo donec. Hac habitasse platea dictumst vestibulum rhoncus. Luctus venenatis 
            lectus magna fringilla urna porttitor rhoncus dolor purus. In hendrerit gravida rutrum
            quisque. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Lectus mauris 
            ultrices eros in cursus. Egestas egestas fringilla phasellus faucibus. Tortor pretium
            viverra suspendisse potenti nullam ac tortor vitae. Vulputate dignissim suspendisse 
            in est ante in. Donec adipiscing tristique risus nec feugiat in fermentum. Eros in 
            cursus turpis massa tincidunt dui ut ornare lectus. Tempus iaculis urna id volutpat
            lacus. In aliquam sem fringilla ut. Mauris commodo quis imperdiet massa tincidunt nunc
            pulvinar. Vitae nunc sed velit dignissim sodales ut eu sem integer.
        </MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Two">
        <MudText>Content Two</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Three">
        <MudText>Content Three</MudText>
    </MudTabPanel>
</MudTabs>

Answer 1

I believe the problem here is because you're styling the MudTabs.

<MudTabs Position="Position.Top"  PanelClass="pt-2" Style="height:320px; overflow-y: scroll">
 <!-- Content -->
</MudTabs>

You should instead add the styles to tab content. In this instance it's the MudText component that needs to be styled.

<MudTabs Position="Position.Top" PanelClass="pt-2">
    <MudTabPanel Text="Item One">
        <MudText Style="max-height:320px; overflow-y: scroll;"> --Very long text--</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Two">
        <MudText Style="max-height:320px; overflow-y: scroll;"> --Very long text--</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Three">
        <MudText Style="max-height:320px; overflow-y: scroll;"> --Very long text--</MudText>
    </MudTabPanel>
</MudTabs>

MudBlazor snippet