CSS Flexbox Resizing (Too Big) When it Flexes?

[ruby76]

I thought I had finally wrapped my head around the core concepts of flexbox, but I have a flex setup where, as soon as the two items in my container “flex,” their HEIGHTS resize so that they overlap with other content above/below that container. I tried applying a red border to the container and can now see that the entire thing isn’t actually resizing; just the interior divs. I’m baffled.

I keep re-reading the tutorial on CSS-Tricks and Googling the problem but feel like I must be missing some very simple concept somewhere. Any ideas?

The site is fairly simple so far (just a splash page), located at https://jetonboylston.com.

I saved the relevant CSS in a pen here: https://codepen.io/ruby76/pen/KRZEMG

(Forgive me for not including the HTML as well – I’ve got a WordPress shortcode in there that plugs in the right-hand content, so it wasn’t showing up in the pen.)

Thanks in advance for any advice!

[Beverleyh]

We’re going to need the HTML in the pen too.

[ruby76]

Got it. Here’s a pen that includes the basic HTML/CSS for this container: https://codepen.io/ruby76/pen/zjRxoN

I removed the WP shortcode and just made the div solid black, for simplicity’s sake, but also updated the pen in my original post with the whole page source if that helps for better visualization of the whole page.

Hope this helps – let me know if I can clarify any better. Thanks for your help!

[Beverleyh]

The issue isn’t with flex… the issue is with the heights of the wrapper and its children.

Try removing the 600px height of the wrapper, and give heights to the children instead, either with a responsive technique – e.g. intrinsic/aspect ratios https://css-tricks.com/aspect-ratio-boxes/ – or media queries to change fixed/explicit heights at your desired breakpoints.

[Pogany]

You may remove .location{align-content: center;}

[ruby76]

Ah, I hate (but love) it when it’s something simple like that. I got my eyeballs so crossed over flexbox properties that I missed that obviously it was related more to the way I set up the container/interior div heights. I adjusted that and all is well now.

Thanks so much for straightening me out!

[Beverleyh]

No problem – glad you sorted it.

[Author]

Posts