Struggling with flexbox layout

[Casper Sørensen]

Hey guys,

So i’m trying to wrap my head around how flexbox works, as opposed to my old and hacky float layouts.

I’ve run into an issue, where it seems like my main content section is not respecting my sidebar (on resizing the screen), even though they are both flex. The main section will overlap the sidebar for some reason..

Here is a link to my codepen, would really appreciate some insight, as I cannot understand why it does not work as I intend it do :)

http://codepen.io/Reached/pen/ogdZxq

• Casper!

[randomdude]

Try adding

flex-wrap: wrap;

to .flex-wrap‘s CSS.

[Casper Sørensen]

Hey Zeke,

It solves the problem with the overlap, however how do I make the content fill 100% of the available width that is left? I thought that happened automatically with flexbox. Setting width 100% destroys the layout unfortunately

Thanks for your help so far, much appreciated!

[randomdude]

Flexbox does that by default – I think – but I’m not sure why it’s not working here. I’ve played around with the code over on my fork, but haven’t gotten anything to work yet. Since you’ve already got some @media queries though, you might be able to do something like:

.child-1, .child-2 {
  width: 50%
}

@media (max-width: 800px) {
  .child-1, .child-2 {
    width: 100%
  }
}

[Author]

Posts