У меня установлен контейнер для переноса: сетка, которая содержит два столбца.Один столбец содержит отзывчивое изображение, другой содержит текст.Столбец изображения настроен на отображение: flex, чтобы изображение заполняло всю высоту столбца, как определено элементом сетки рядом с ним.
Это прекрасно работает в Firefox:

Но в Chrome изображение отображается в полный рост, а не как отзывчивое:

Если яизмените отображение на -webkit-box, Chrome ведет себя как нужно ...

... но не должен работать должным образом при использовании дисплея: flex?
Ссылка: http://uvmc.wpengine.com/play-sing-learn/classes
Я пробовал все виды комбинаций ширины, минимальной ширины, высоты, минимальной высоты изображения, но, похоже, ничего не работает.Я знаю, что могу справиться с этим, используя фоновое изображение, но мне бы очень хотелось использовать реальное изображение.Есть идеи?