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>