0

I have a wrapping container set to display:grid that contains two columns. One column contains a responsive image, the other contains text. The image column is set to display:flex so that the image fills the full height of the columnn as determined by the grid item next to it.

This works great in Firefox:

enter image description here

But in Chrome the image shows at full height rather than being responsive:

enter image description here

If I change the display to -webkit-box, Chrome behaves as desired...

enter image description here

...but shouldn't it work as expected using display:flex?

Link: http://uvmc.wpengine.com/play-sing-learn/classes

I've tried all sorts of combinations of width, min-width, height, min-height on the image, but nothing seems to work. I know I can handle this using a background image instead, but I'd really like to use an actual image. Any ideas?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
dadra
  • 153
  • 1
  • 3
  • 15

1 Answers1

0

There's a lot going on in that code.

It's important to note that percentage heights are unreliable across browsers when parent elements don't have defined heights (see links below).

That's said, in this particular case, adding height: 100% to the img element (.class-main-img) appears to solve the problem.

More information:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Thank you! `height: 100%` did the trick. I really thought that was one of the first things I tried! Regardless, much appreciated. – dadra May 16 '19 at 11:24