I have a MudBlazor app and have often noticed that percentage heights and widths are often ignored.
In my current example I have a MudTab in which I want to display a MudTreeView which is scrollable and under the TreeView a button.
But I want to scale the TreeView as a percentage of the MudMainContent so something like "do not get bigger than 50%" and if it does, I want the treeview to be scrollable.
However, this Style="max-height: 50%;" on the MudItem seems to be completely ignored and I wonder why?
For example, if I set Style="max-height: 200px;" the scrolling works, but I would have to do without the dynamic height and the resposiveness is lost
Here is a TryMudBlazor example
Here is the code:
<MudLayout><MudAppBar Elevation="1"><MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(e => DrawerToggle())"/></MudAppBar><MudDrawer @bind-Open="_drawerOpen" Elevation="2"></MudDrawer><MudMainContent><MudContainer Class="overflow-scroll" MaxWidth="MaxWidth.ExtraLarge" Style="height: calc(100vh - var(--mud-appbar-height)); max-height: calc(100vh - var(--mud-appbar-height));"><MudTabs Outlined="true" Position="Position.Top" Rounded="true" Border="true" Elevation="6" ApplyEffectsToContainer="true" Class="mt-8" PanelClass="pa-6" Style="overflow-y: hidden; max-height: 100%;"><MudTabPanel Text="Test"><ChildContent><MudContainer MaxWidth="MaxWidth.Small"><MudGrid Justify="Justify.Center" Spacing="2" Class="mb-3"><!-- max-height: 50% is not working here --><MudItem sm="12" xs="12" Style="max-height: 50%;" Class="overflow-scroll"><MudTreeView Hover ReadOnly="false" TriState="false" AutoSelectParent="true" SelectionMode="SelectionMode.MultiSelection" CheckBoxColor="Color.Primary" T="string" @bind-SelectedValues="SelectedTreeItems"> @for (int i = 0; i < 50; i++) {<MudTreeViewItem Text="@($"Treeview Item {i}")"/> }</MudTreeView></MudItem></MudGrid><!-- This button should be visible --><MudButton Variant="Variant.Filled" Color="Color.Primary">Primary</MudButton></MudContainer></ChildContent></MudTabPanel></MudTabs></MudContainer></MudMainContent></MudLayout>@code { bool _drawerOpen = true; private IReadOnlyCollection<string> SelectedTreeItems { get; set; } = []; void DrawerToggle() { _drawerOpen = !_drawerOpen; }}