Flex relative to outer div (position will not help)

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;
      }
    }
  }
}