html/css - Flexible content block with fixed width sidebar

Question

To make my problem a little more visual i added some images with different scenarios. This is how it should work:

#1 - Content block has a min-width of x, columns fit inside this width so it stays the same.
#2 - Content block takes more space because more columns are added and it fits within the max-width
#3 - Content block reaches max-width because more columns are added, columns are now sizing down to fit within the max-width .

 .app { display: flex; align-items: stretch; height: 100%; }.navigation { background-color: purple; display: flex; justify-content: space-between; flex-direction: column; width: 18rem; }.navigation__primary { display: flex; flex-direction: column; width: 100%; }.navigation__primary li { flex: 1; }.main { background-color: yellow; flex: 1; padding: 0.5rem; display: inline-flex; justify-content: center; }.main__wrapper { background-color: red; max-width: calc(100% - 16rem); padding: 1rem; }.week { background-color: green; display: flex; }.week__col { flex: 1 1 120px; /* this doesn't work */ } /* RESET */ /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Remove default padding */ ul[class], ol[class] { padding: 0; } /* Remove default margin */ body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; } /* Set core body defaults */ body, html { height: 100%; } body { scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; } /* Remove list styles on ul, ol elements with a class attribute */ ul[class], ol[class] { list-style: none; } /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; text-decoration: none; } /* Make images easier to work with */ img { max-width: 100%; display: block; } /* Natural flow and rhythm in articles by default */ article > * + * { margin-top: 1em; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } em { font-weight: 600; font-style: normal; }

 <div id="app" class="app"> <nav class="navigation"> <ul class="navigation__primary"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> <a class="navigation__logo">1</a> </nav> <main class="main"> <div class="main__wrapper"> <div class="week"> <div class="week__col">1</div> <div class="week__col">2</div> <div class="week__col">3</div> <div class="week__col">4</div> <div class="week__col">5</div> </div> </div> </main> </div>

Answer 1

CSS grid can do this.

here is only the relevant part of the code:

 .container { display:grid; max-width:400px; /* your max-width */ width: max-content; /* fit the content*/ grid-auto-flow:column; /* column flow */ grid-auto-columns:1fr; /* all column equal size */ border:2px solid; margin:20px auto; gap:10px; }.container > div { background:red; overflow:hidden; /* hide the pseudo element overflow when columns get smaller */ height:60px; }.container > div:before { content:""; display:block; width:50px; /* the starting width of your column */ }

 <div class="container"> <div></div> <div></div> </div> <div class="container"> <div></div> <div></div> <div></div> <div></div> </div> <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>