Flex relative to outer div (position will not help) - css

Question

What I want to do is align .prod (products) all next to each other as if they were actually in the .subcontainer.
I can't use position since the 8th prod will not sit next to the 9th prod and so on. I could write some JS to do this however I'm trying to use pure css/sass. I have a feeling it's not possible, therefore stackoverflow amaze me with your work arounds.
Codepen: https://codepen.io/shaggywolfhound/pen/vYpMaPx
HTML:
<div class="container">
<div class="subcontainer">
<ol class="prod-cont">
<li class="prod"></li>
<li class="prod"></li>
<li class="prod"></li>
<li class="prod"></li>
<li class="prod"></li>
<li class="prod"></li>
<li class="prod"></li>
</ol>
<ol class="prod-cont">
<li class="prod"></li>
<li class="prod"></li>
.....
SASS:
.container {
width: 200px;
height: 2000px;
.subcontainer {
border: 1px solid red;
.prod-cont {
display: flex;
flex-wrap: wrap;
.prod {
margin: 2px;
display: inline-block;
border: 1px solid green;
box-sizing: border-box;
width: 45px;
height: 100px;
}
}
}
}

Answer 1

just add display: flex on .subcontainer and padding-left: 0 on .prod-cont.
Your code should look like this:
.container {
width: 200px;
height: 2000px;
.subcontainer {
display: flex;
border: 1px solid red;
.prod-cont {
display: flex;
flex-wrap: wrap;
padding-left: 0;
.prod {
margin: 2px;
display: inline-block;
border: 1px solid green;
box-sizing: border-box;
width: 45px;
height: 100px;
}
}
}
}