Adjust flex items in same column - html

Question

I have a horizontal slider(scrollable) on my page, which contains list of sub-cards. The below code snippet works perfectly fine.
JSFiddle-1: https://jsfiddle.net/28rnwpqk/
I now want to display different sized cards, which are dynamic. I made following change to my container css, so as to stack multiple cards in same column if space exists.
.container {
...
flex-direction: column;
flex-wrap: wrap;
...
}
JSFiddle-2: https://jsfiddle.net/k60zLg74/
This results in the parent container width being set only to width of first slider item, bcz of flex-direction: column property. As such the background color, slider scroll has stopped working. What is the correct way to achieve this without impacting width of container. My main requirement is to have flex items stacked vertically if space exists and size of cards is not know upfront.

Answer 1

CSS grid can do this better:
.viewport {
width: 600px;
height: 200px;
overflow-x: hidden;
}
.container {
display: inline-grid;
background-color: DodgerBlue;
grid-auto-flow:column;
grid-template-rows:1fr 1fr;
grid-auto-columns:130px;
gap: 10px;
height: 100%;
min-width:100%;
}
.item {
box-sizing: border-box;
background-color: #f1f1f1;
padding: 20px;
margin: 10px;
font-size: 30px;
grid-row:span 2;
}
.item.small {
grid-row:span 1;
}
<div class="viewport">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item small">3</div>
<div class="item small">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
</div>

Answer 2

Your width: max_content; setting is restricting the width of your container. Remove that property, and your full container will have a blue background as expected:
.container {
display: flex;
background-color: DodgerBlue;
flex-direction: column;
flex-wrap: wrap;
gap: 10px;
height: 200px;
}