Grid with percent not working in Firefox

[fbrugger]

Hi there

I have set up a grid with 26 columns and 3 rows. The rows have a value of 7% 86% 7%:

This works well in the frontend of Google Chrome Browser and Microsoft Edge:

However in Firefox the grid cell is not stretching from line 2 to 3. Instead the cell has only the height of its content and is placed centered between line 2 and 3:

If I use values with em instead of %, the cell is also displayed correct in Ferefox:

Any idea, why percent is not working in Firefox?

Thank you very much for your help!

Kind regards,
Felix

[Ismael]

Hello Felix,

Thank you for the inquiry.

We may need to inspect the page to properly understand the issue. Please create a test page, then provide the login details in the secure note.

Best regards.

[fbrugger]

Hi Ismael

Thank you very much for looking into this. I will send you the link to the test-page and the login information.

Kind regards,
Felix

[Ismael]

Thank you for the info. It works when we specify the height value of the cell.

Firefox probably requires the element to have a defined height.

[fbrugger]

Hi Ismael

thank you very much for your reply and suggestion. Yes I tryed this too but is not what i want at all, because the height of the whole gris is dynamic so i can not set a fix height. It would work if I could set a hight 100% but then again Firefox doesn’t accept percent.

Any idea…?

Thanks again,
Felix

[ruenel]

Hello Felix,

FYI:
Firefox needs a reference for % heights. Use vh , px , or min-height .

My recommendation is to use: 0.07fr 0.86fr 0.07fr for your Row Height.

Kindly check out my demo on your test page.

[fbrugger]

Hi Rue

This is a brilliant idea! Thank you very much, your suggestion works perfect!

Thanks again for your great support!

Kind regards,
Felix

[tristup]

Hi Felix,

Glad that we are able to help you.

Thanks