Flexbox внутри CSS сетки с динамическим содержимым

Question

У меня есть сетка с ячейками, имеющими динамическую высоту (раскрывающая информацию о наведении мыши).Я хочу, чтобы сетка увеличивала высоту строки в зависимости от размера содержимого и снова уменьшала ее после окончания наведения.В каждой ячейке может быть несколько элементов, и элементы должны всегда заполнять ячейку полностью

• Высота строки шаблона в сетке установлена ​​на auto
• Контейнер внутри ячейкииспользует flexbox для максимизации содержимого

CodePen

.grid {
   display: grid;
   grid-template-columns: 150px 150px 150px 150px;
   grid-template-rows: auto auto auto;
   margin: 20px;
}

Проблема выглядит по-разному в разных браузерах, но у нее всегда одни и те же симптомы.

• после наведения высота строки больше не будет уменьшаться
• после изменения какого-либо стиля ячейки (например, в Chrome Dev-Tools) макет исправлен.(Происходит перекомпоновка)
• при некоторых обстоятельствах элементы / строки будут увеличиваться с каждым наведением

Похоже, что он работает так, как задумано, по крайней мере с Chrome 72 и Firefox 65.0.1, так что Safari является последним, но очень важным для мобильных устройств **

То, что я уже пробовал

• Все приемы принудительного оплавления (JS + CSS), которые я мог найти, когда япредполагал, что только перекомпоновка не запускает
• Удаление / добавление различных стилей для / из дочерних элементов, чтобы увидеть, заставляет ли один из них оставить этот размер после изменения размера
• , удаляя / добавляя элементы в/ из ячейки, чтобы увидеть, как влияет на поведение

Сначала это вызвало большинство проблем с Safari, и я подумал, что это может быть

Safari пока не поддерживает встроеннуюи внешние размеры со свойствами сетки, такими как grid-template-row (https://caniuse.com/#feat=css-grid)

Однако этих проблем не должно быть в Chrome, и расширение работает нормально в Safari, еслисодержимое ячейки не имеет 100% высоты

В настоящее время я предполагаю, что это могут быть просто ошибки браузера в относительно недавней поддержке сетки.Таким образом, я был бы также признателен за обходные пути.

Поведение в Safari (неверно):

Поведение в Chrome (правильно):