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
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.
add flex:1; to your div with class container. It will fix the issue
and also remove the fixed height from wrapper
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.
But why exactly do you need to set a height?
The height is calculated by the viewports height minus the header. I need everything to be visible without scrolling...
No need to use calc for that. You can just do something like this
https://codepen.io/tok124/pen/abPOyWL
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