Flexbox Sidebar With Max-width

Is it possible to set max-width on the sidebar in my flexbox layout without affecting the content area (article)? Changing the max-width now also affects the content area. I want t

Solution 1:

Right now you're telling both your <nav> and your <article> to grow as much as they can with this declaration:

.flex-container > * {
    flex: 1100%;
}

You should define the default size of your <nav> element before the remaining space is distributed with auto instead of 100%. The auto keyword means "look at my width or height property".

.flex-container > .nav {
    flex: 11 auto;
    max-width: 300px;
}

Right there you're telling your <nav> to grow and shrink and never be wider than 300px (it's gonna be actually 330px because the padding isn't considered when doing this calculations)

Edit:

So in order to solve your problem I had to rewrite some code, here's a working fiddle