grid-template-rows: .25fr ведёт себя странно в хроме

Question

Два года назад было видео про анимацию высоты: https://www.youtube.com/watch?v=B_n4YONte5A.

Сейчас я попытался использовать его и оказалось, что в хроме grid-template-rows ведёт себя странно и не так, как в FF. Смотреть надо на средний блок (левый просто для оценки размера контента, правый - фикс для хрома):

section {
  display: grid;
  grid-template-rows: .25fr;
  max-width: 180px;
  background: red;
  color: white;
  float: left;
}

section + section {
  margin-left: 1em;
}

div {
  background: #000A;
}

.cropped {
  overflow: hidden;
}

.large {
  height: 400%;
}

<section>
  <div>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto sequi, rem explicabo voluptate architecto voluptates assumenda, suscipit, enim quaerat obcaecati fuga dicta! Assumenda omnis sunt in perferendis delectus numquam. Iure?
  </div>
</section>

<section>
  <div class="cropped">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto sequi, rem explicabo voluptate architecto voluptates assumenda, suscipit, enim quaerat obcaecati fuga dicta! Assumenda omnis sunt in perferendis delectus numquam. Iure?
  </div>
</section>

<section>
  <div class="cropped large">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto sequi, rem explicabo voluptate architecto voluptates assumenda, suscipit, enim quaerat obcaecati fuga dicta! Assumenda omnis sunt in perferendis delectus numquam. Iure?
  </div>
</section>

В Хроме это выглядит вот так:

Получается, что при grid-template-rows: .25fr; хром понимает, что надо сделать section размером в 25% её содержимого, но потом применяет собственно шаблон грида и выделяет на div только 25% уже урезанного пространства. Чтобы получить всё пространство, приходится прописывать height: 400%; для div'a.

Однако FF считает иначе и выделяет на div всё пространство section и ему 400% только вредит:

Смотрю на Win11 в

Google Chrome 137.0.7151.120 (Официальная сборка) (64 бит)
Firefox 137.0.1 (64-разрядный)

Лично мне поведение FF кажется более правильным - это так?

PS: Про другие способы анимации высоты не надо - я их знаю - и interpolate-size, и calc-size, и скриптом замерить, и max-heigh влепить.

БЛОГ НА HUSL

grid-template-rows: .25fr ведёт себя странно в хроме

Ответы (0 шт):