How to set full width divs inside horizontal scroll - html

Question

so I get some problem with the horizontal scroll, I read a lot about the fixed-width items inside the scroll containers but what about next thing:
how to write styles that will be automatically set the width of non-fixed-width items like (item with classes weeks and date)
.container {
display: flex;
flex-direction: column;
flex: 1;
overflow-x: auto;
margin: 0 1rem;
border: 1px solid grey;
}
.container__columns {
display: flex;
flex: auto;
}
.container__rows {
display: flex;
flex: 1;
flex-direction: column;
}
.col {
flex: 0 0 250px;
max-width: 250px;
padding: 1rem 4rem;
background: lightgoldenrodyellow;
color: #000;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
.weeks,
.date {
padding-left: 1rem;
}
.weeks {
background: lightgrey;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
.date {
background: lightgrey;
border-bottom: 1px solid grey;
}
<div class="container">
<div class="container__columns">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
</div>
<div class="container__rows">
<div class="weeks">
Week 1
</div>
<div class="date">
Augest 23, 1998, 24 - hours
</div>
<div class="container__columns">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
</div>
</div>
</div>
I expect the next thing: the CSS which will be set items with classes date and weeks to full width.

Answer 1

consider inline-flex; for the inner container and remove flex for the main container as it's not really needed in your case.
.container {
overflow-x: auto;
margin: 0 1rem;
border: 1px solid grey;
}
.container__columns {
display: inline-flex;
}
.container__rows {
display: inline-flex;
flex-direction: column;
}
.col {
width:250px;
padding: 1rem 4rem;
background: lightgoldenrodyellow;
color: #000;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
.weeks,
.date {
padding-left: 1rem;
}
.weeks {
background: lightgrey;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
.date {
background: lightgrey;
border-bottom: 1px solid grey;
}
<div class="container">
<div class="container__columns">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
</div>
<div class="container__rows">
<div class="weeks">
Week 1
</div>
<div class="date">
Augest 23, 1998, 24 - hours
</div>
<div class="container__columns">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
</div>
</div>
</div>