bvcx bvcx - 1 year ago 276
CSS Question

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 the current functionality, with the layout being responsive, but also setting a max-width on the sidebar.



<!DOCTYPE html>

<div class="flex-container">

<nav class="nav">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>

<article class="article">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor ....</p>




.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;

.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;

.article {
text-align: left;

.nav {

.nav ul {
list-style-type: none;
padding: 0;

.nav ul a {
text-decoration: none;

@media all and (min-width: 768px) {
.nav {
-webkit-flex: 1 auto;
flex:1 auto;

.article {
-webkit-flex:5 0px;
flex:5 0px;

Answer Source

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

.flex-container > * {
    flex: 1 100%;

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: 1 1 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)


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download