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
10 Replies
briancross
briancross15mo ago
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.
Tok124 (CSS Nerd)
add flex:1; to your div with class container. It will fix the issue
Tok124 (CSS Nerd)
and also remove the fixed height from wrapper
mrmoon97
mrmoon9715mo ago
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". Thank you @tok124 ! Unfortunately, I need to calc the height in the real project... That's what makes it a bit complicate.
Tok124 (CSS Nerd)
But why exactly do you need to set a height?
mrmoon97
mrmoon9715mo ago
The height is calculated by the viewports height minus the header. I need everything to be visible without scrolling...
Tok124 (CSS Nerd)
No need to use calc for that. You can just do something like this https://codepen.io/tok124/pen/abPOyWL
Tim
CodePen
abPOyWL
...
Tok124 (CSS Nerd)
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
Want results from more Discord servers?
Add your server