Соотношение сторон внутри сетки работает по-разному в Chrome и Firefox. ⇐ Html

[Anonymous]

Использование макета сетки и настройка соотношения сторон для некоторых дочерних элементов не рассчитываются правильно в Firefox, столбец не расширяется, и дочерний элемент перекрывает этот столбец.

Код: Выделить всё

Text A
Text B

Код: Выделить всё

.parent{
width: 300px;
height: 100px;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
}

.image{

height:100%;
aspect-ratio: 1;
background-color: blue;
grid-row: span 2 / span 2;
}

.textA{
font-size:1.5rem;
background-color: gold;

}

.textB{
font-size:1rem;
background-color: violet;

}

https://jsfiddle.net/qsuten2L/3/
В Chrome и Firefox это будет работать по-разному.
Поведение Chrome — это то, что мне нужно

Подробнее здесь: https://stackoverflow.com/questions/793 ... nd-firefox