vertical images and videos are cut off when using css and gr.Group

[hysts]

Describe the bug

When specifying max-width and max-height for images and videos in css, the behavior is inconsistent depending on whether they are in gr.Group or not. It seems when using gr.Group, images and videos are fit to the width, ignoring height. I don't think they should be cut off when using gr.Group either.

Is there an existing issue for this?

• [X] I have searched the existing issues

Reproduction

https://huggingface.co/spaces/hysts/_sample_003

Screenshot

The behavior is the same when the width is longer than height.

But the behavior is not the same when the height is longer than width.

Logs

Running on local URL:  http://localhost:7860/

To create a public link, set `share=True` in `launch()`.

System Info

gradio==3.0.20

Severity

annoying