Why does my grid-child with aspect-ratio item overflow the flex-parent?

Hey guys! I'm new here and need some help with something. I have a flexbox container with a fixed height and 3 childs. One of them has display grid, flexgrow 1 on and an item which should contain it's aspect ratio of 16:9. However I don't get why the widths aren't adjusting.

https://codepen.io/Markus-Rappat/pen/XWobKrL?editors=1100

CodePenMarkus Rappat

Overflowing Grid Items

...

briancross•8/23/23, 3:24 AM

The player div is set to a height of 100% and aspect ratio of 16/9. That's making it overflow its container. What layout are you trying to achieve? It looks like you want the player and the box next to it to be in the center with the 2 green divs above and below, filling the width? If so, why are you using a flex container? I'd just use grid for the whole thing. Please correct me if I'm wrong in my assumptions.

Mmrmoon97 Hey guys! I'm new here and need some help with something. I have a flexbox cont...

Tok124 (CSS Nerd)•8/23/23, 3:25 AM

add flex:1; to your div with class container. It will fix the issue

Tok124 (CSS Nerd)•8/23/23, 3:25 AM

Tok124 (CSS Nerd)•8/23/23, 3:27 AM

and also remove the fixed height from wrapper

Tok124 (CSS Nerd)•8/23/23, 3:28 AM

https://codepen.io/tok124/pen/poqJEQR

CodePenTim

Overflowing Grid Items

...

Bbriancross The player div is set to a height of 100% and aspect ratio of 16/9. That's makin...

mrmoon97OP•8/23/23, 8:15 AM

That's exactly what I'm trying to achieve yes, but unfortunately I'm not able to edit the html in the real project. I need this kind of "subgrid".

TTok124 (CSS Nerd)https://codepen.io/tok124/pen/poqJEQR

mrmoon97OP•8/23/23, 8:17 AM

Thank you @tok124 ! Unfortunately, I need to calc the height in the real project... That's what makes it a bit complicate.

Mmrmoon97 Thank you @tok124 ! Unfortunately, I need to calc the height in the real project...

Tok124 (CSS Nerd)•8/23/23, 10:54 AM

But why exactly do you need to set a height?

TTok124 (CSS Nerd)But why exactly do you need to set a height?

mrmoon97OP•8/23/23, 10:55 AM

The height is calculated by the viewports height minus the header. I need everything to be visible without scrolling...

Mmrmoon97 The height is calculated by the viewports height minus the header. I need everyt...

Tok124 (CSS Nerd)•8/23/23, 11:10 AM

No need to use calc for that. You can just do something like this
https://codepen.io/tok124/pen/abPOyWL

CodePenTim

abPOyWL

...

Tok124 (CSS Nerd)•8/23/23, 11:13 AM

So, the wrapper has 100vh height, the header is inside wrapper with a min-height of 100px, and the content is also there with flex:1; so it will take up the rest of avalible height