Reply To: [Solved] Better way of handling this responsive layout with flexbox?

[Leland]

Thanks so much for your response Paulie_D. It looks like you switched the media query around to be mobile first, but that’s totally fine since I probably should’ve been doing that anyway.

After working with your code, I realized my reduced test case was too reduced. I also have a full width nav bar on top of everything, and a wrapper div encapsulating everything. Didn’t realize that was relevant at first, so I left it out. Very sorry about that. Flexbox is super tough to wrap my head around for some reason.

I’ve set up a reduced test case of what I have so far here: http://codepen.io/leland/pen/obzWjZ

The “big-wrapper” div seems to make the divs stack vertically, breaking the sidebar-on-the-right layout, and I’m not sure why.

It seems like the ideal solution would be to incorporate the full width nav bar within the “wrapper” div (with display: flex; applied) and then apply the max-width: 1000px; margin: 0 auto; code to that, ditching the “big-wrapper” div.

Any ideas on the best way to approach?