Словил баг с реализацией гридов в Firefox [колонки через repeat(auto-fit) и position: absolute]?

Question

[Ivan Ustûžanin]

блок с жёлтым фоном в Chrome и Safari нормально расширяется, а в Firefox выстраивается в одну колонку, это я чего-то не учёл или всё же словил баг с реализацией гридов, а скорее с реализацией repeat(auto-fit), в Firefox?



ПЛЮС: как это выглядит в Firefox:

Comments

[Ankhena]

width: -moz-available; такая штука приведет левый столбец к состоянию правого. Но не к идентичности с хромом.

[Wispik]

по мне это не баг, просто у родителя не задана ширина и браузер сам додумывает ширину как ему угодно. Сетка-то отрисовывается правильно

в хроме кстати тоже некорректно выглядит. Второй t4 на всю ширину блока растянут, а первый нет

[Ivan Ustûžanin]

Ankhena, такого можно добиться и с использованием width: 100%;, правда для всех браузеров
я же специально не задаю ширину, чтобы ширина была ровно такой, чтобы всё влезло

[Ankhena]

Ivan Ustûžanin, да, кажется не проснулась. В своё оправдание могу только сказать, что так только в FF плохо, а с width 100% всюду.

[Ivan Ustûžanin]

Wispik, width не задано, но есть max-width, чего и Хрому и Сафари достаточно, а не задано width с целью получить ширину кратную элементам внутри

а правый блок сделан через flex, там поведение понятно, объяснимо и сходится для всех браузеров

[Ivan Ustûžanin]

Ankhena, поэтому даже на всякий случай width: fit-content; и подобное пробовал, но не помогло

если в результате не найду решения, остановлюсь на правом варианте — при малом количестве блоков он ведёт себя адекватно, нужно только следить за этим количеством при рендеринге

[Ankhena]

Ivan Ustûžanin, не fit-content там и не должен был помочь.

если в результате не найду решения, остановлюсь на правом варианте — при малом количестве блоков он ведёт себя адекватно, нужно только следить за этим количеством при рендеринге

Это же от ширины сильно зависит.
Я бы добавила minmax в грид, если позволяет дизайн. Либо тогда уж расчет ширины блока. Но опять таки, я ничего не знаю ни про истинный дизайн и ни про функциональность этого блока.

[Wispik]

Ivan Ustûžanin, как вариант, можно такой костыль использовать (рассчитывать ширину, от кол-ва блоков внутри):

.t4-grid:has(:nth-child(4)) {
  width: calc(4 * var(--size) + ((4 + 1)* 10px));
}
.t4-grid:has(:nth-child(5)) {
  width: calc(5 * var(--size) + ((5 + 1)* 10px));
}

Если scss использовать, то это в функции можно сделать (навскидку написал, вроде правильно)

@for $i from 2 through 10 {
    .t4-grid:has(:nth-child(#{$i})) {
        width: calc($i * var(--size) + (($i + 1)* 10px));
    }
  }

[Ivan Ustûžanin]

Ankhena, ширина почти фиксированная, так что количество можно более-менее рассчитать
а так t4 — обычная выпадающая менюшка с элементами (t5) фиксированного размера
основное требование: чтобы ширина t4 была по количеству целиком влезающих в него t5 с гапами, а сам t4 был выровнен по правому краю относительно контейнера меню (t2), но не превышал его ширину
дополнительное требование: чтобы при переполнении и переносе на новую строку ширина t4 оставалась по количеству целиком влезающих в него t5 и была всё так же выровнена по правому краю

собственно все эти требования в песочнице и выполняются и в Хроме, и в Сафари, но не в Огнелисе

завёл баг для Огнелиса https://bugzilla.mozilla.org/show_bug.cgi?id=1930672, посмотрим что скажут

[Ivan Ustûžanin]

Wispik, костыли я и сам могу придумать, меня же скорее интересует баг это или не баг, и поскольку всё же кажется, что это таки баг, то уже его зарепортил

да и как я писал, вариант с flex для одной строки соответствует основным требованиям, а для дополнительных как раз и придётся какие-то костыли придумывать )

[Ankhena]

Ivan Ustûžanin,

посмотрим что скажут

Поделитесь потом, если будет возможность.