MudBlazor DataGrid Cell Overflow in FireFox

Question

In this demo test app, I have a MudBlazor DataGrid and I set the max-width of the column to be 100px. That way if a cell has a long string of text, the user has to click the drag bar and adjust the column width.

The problem I am having is in FireFox, the text from one cell is extending into adjacent cells. I am not sure how to resolve this and would appreciate any help!

Here is the test code I am using:

<div style="width: 50vw;">
  <MudDataGrid T="Person" Items="@People" ColumnResizeMode="ResizeMode.Container">
    <Columns>
      <PropertyColumn Property="x => x.Name" CellStyle="max-width: 100px; overflow-x: hidden; white-space: nowrap;" />
      <PropertyColumn Property="x => x.State" CellStyle="max-width: 100px; overflow-x: hidden; white-space: nowrap;" />
      <PropertyColumn Property="x => x.Age" CellStyle="max-width: 100px; overflow-x: hidden; white-space: nowrap;" />
    </Columns>
  </MudDataGrid>
</div>

@code {

  private IEnumerable<Person> People = new List<Person>
  {
    new Person("Brady", 25, "Florida"),
    new Person("Tim", 32, "Minnesota"),
    new Person("Derek", 51, "Utahqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq"),
    new Person("Ben", 27, "Wisconsin"),
    new Person("Sam", 34, "Alaska")
  };

}

The output of this code works as expected in Chrome:

The output of this code in FireFox produces this output:

As you can see in the second image, when running this code in FireFox text from one cell overflows into another. Any recommendations on how to resolve with would be greatly appreciated!

Answer 1

It seems in firefox overflow-y must also be set when overflow-x is set.

To overcome this problem, you can use overflow:hidden instead of just overflow-x:hidden so that you're setting both x and y axis as hidden. And since you're using white-space: nowrap; then, you're not going to need to worry about overflow-y anyways.

<PropertyColumn Property="x => x.State" CellStyle="max-width: 100px; overflow: hidden; white-space: nowrap;" />

MudBlazor Snippet