Query loop block (4 column grid) - CSS width calc issue (Firefox)

[james-s-k]

Description

When I have 4 columns in the query loop block, at certain screen sizes the last column breaks down onto the next line.

This only happens on Firefox as far as I know (works on Chrome).

I think it has something to do with this CSS:

@media (min-width: 600px) {
.wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li {
width: calc(25% - .9375em);
}
}

Changing it to this fixes the issue:

@media (min-width: 600px) {
.wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li {
width: calc(24.99% - .9375em);
}
}

Step-by-step reproduction instructions

Using version 6.2. Not using Gutenberg plugin. Firefox.

See screenshots for everything you should need to replicate the layout.

Screenshots, screen recording, code snippet

Environment info

WordPress 6.2
Firefox
Mac

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[andrewserong]

Thanks for opening the issue! There's a WIP PR from @tellthemachines over in #49050 which could be a potential fix for this, as it's exploring swapping the flex rules for grid for the post template block, which shouldn't require the same width calculations to factor in the block spacing.