grid-template-columns: 350px minmax(0, 1fr);

by Konstantin Rouda

HTML

<!-- <section class="c-container">
<div class="c-item">1</div>
    <div class="c-item">Tofixthisanoverflowvalueotherthanvisibleorwecan</div>
<div class="c-item">3</div>
</section> -->


<section class="c-container">
   <aside class="c-aside">Aside</aside>
    <main class="c-main">
       <ul class="c-list">
       <li class="c-list__item"></li>
       <li class="c-list__item"></li>
       <li class="c-list__item"></li>
       <li class="c-list__item"></li>
       <li class="c-list__item"></li>
       <li class="c-list__item"></li>
       <li class="c-list__item"></li>
       <li class="c-list__item"></li>
       <li class="c-list__item"></li>
       <li class="c-list__item"></li>
       </ul>
    </main>

</section>

CSS

* {
  box-sizing: border-box;
}

/* .c-container {
  display: grid;
  grid-template-columns: 1fr 370px 1fr;
  gap: 1rem;
}

.c-item {
  background: cornflowerblue;
}

.c-item:nth-child(2) {
  background: firebrick;
} */

/*  .c-container {
  display: flex;
 grid-template-columns: 1fr 370px 1fr;
  gap: 1rem;
 }
 
 .c-item {
  background: cornflowerblue;
 min-width: 0;
 flex-basis: 0;
  overflow-wrap: break-word;
 }
 
 .c-item:nth-child(2) {
  background: firebrick;
 } */
 
 .c-container {
   display: grid;
   grid-template-columns: 350px minmax(0, 1fr);
 }
 
 .c-aside {
   background: hsla(190, 50%, 70%, 1);
 }
 
 .c-main {
   display: flex;
   align-items: flex-end;
   background: hsla(210, 50%, 80%, 1);
 }
 
 .c-list {
   display: flex;
   overflow-x: auto;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 .c-list__item {
   background: cornflowerblue;
   min-width: 100px;
   min-height: 200px;
   border-radius: 0.15rem;
   margin-right: 0.5rem;
 }