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

[Leland]

I have a layout like what you see in this Pen: http://codepen.io/leland/pen/bEwgbb

Since the the sidebar div is last in the markup, a normal media query that sets the previously floated divs to full width won’t work so well since the footer should be at the bottom.

You can see what I mean by clicking the ‘Trigger “media query”‘ button on the left.

Right now, I’m using jQuery to insert the div before the footer. You can see what I mean by clicking the “Trigger DOM manipulation” button on the right.

This is what I’d like it to look like, but I’d rather avoid JavaScript and have the footer at the bottom of the initial markup (which makes more semantic sense anyway).

I’m thinking this would be a great use case for Flexbox, but I don’t understand it well enough to pull it off. Any guidance would be much appreciated.

Happy holidays everyone! :)

[Paulie_D]

Here you go. Is this what you meant?

Not sure if I have the media query the right way round.

http://codepen.io/Paulie-D/pen/xZEqKB?editors=110

[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?

[Paulie_D]

It’ll take some thinking about.

But if you want a full width navbar it can’t really be inside a restricted width container…unless the content of that navbar will also respect the container.

Then we can fiddle with it.

[Leland]

“But if you want a full width navbar it can’t really be inside a restricted width container…unless the content of that navbar will also respect the container.”

I meant the navbar will be full width, respective to the container (not necessarily the window). Sorry if I wasn’t clear!

Thank you.

[Paulie_D]

Hmm…at the moment I’m having trouble with this…I need to have a set height for the navbar and then I can use calc to set the height of the aside…otherwise the wrapping doesn’t work right..

I’d have to check but I think this is an issue with nested flexboxes and 100% height not calculating right (at least in Chrome).

http://codepen.io/Paulie-D/pen/gPwWwz

[Leland]

Interesting. I’m noticing the same issue in Firefox as well. I’ll continue to mess with this myself to see what I can come up with. Thanks for looking into it. :)

[Leland]

I solved the issue from my second pen by adding height: 100%; to the “super wrapper” as well. See: http://codepen.io/leland/pen/obzWjZ

Thanks so much for your help, Paulie_D. Would’ve taken me a long time to figure this out on my own. :)

[Author]

Posts