How to make vertical line in cell to match height of table made with flexbox?

Question

I want to make a table with HTML using flexbox, not table tag since I've encountered a weird behavior when I wanted to print a page on chrome the height of tbody in table reduced to fit its width, which is something I don't want I want to keep him with fixed height, that's why I went using flex at least I've control of setting height!

But here's the issue I faced again:

I want the borders of cell either left or right cells keeps the height of table body till the end; That's I've used JS looping and creating empty cells just to imitate space of height but I think it's not the best approach, it breaks the borders of table and go beyond or more than it should take. here's picture of what happen look at the bottom of table:

let iLogic = 0,
  rowsNew = "";
while (iLogic <= 29) {
  rowsNew += `<div class="row">
  <div class="cell-td">&nbsp;</div>
  <div class="cell-td">&nbsp;</div>
  <div class="cell-td">&nbsp;</div>
  <div class="cell-td">&nbsp;</div>
  <div class="cell-td">&nbsp;</div>
  <div class="cell-td">&nbsp;</div>
  <div class="cell-td">&nbsp;</div>
  </div>
  `;
  iLogic++;
}

document.querySelector(".template").innerHTML += rowsNew;

.table {
    height: 808px;
    margin-top: 10px;
    border: 1px solid;
  }
  .row {
    display: flex;
  }
  .row .cell-th {
    border: 1px solid gray;
    font-weight: bold;
  }
  .row .cell-th {
    border: 1px solid rgb(5, 5, 5);
    width: 10%;
    font-weight: bold;
    text-align: center;
    padding: 4px;
  }
  .row .cell-td {
    border: 1px solid gray;
    padding: 4px;
    width: 10%;
    text-align: center;
    border-bottom: none;
    border-top: none;
  }
  /*Designation*/
  .row .cell-th:nth-child(3),.row .cell-td:nth-child(3){
      width: 50%;
  }
  .row .cell-th:nth-child(4),.row .cell-td:nth-child(4){
      width: 5%;
  }
  /*Code Article*/
  .row .cell-th:nth-child(1),.row .cell-td:nth-child(1){
      width: 15%;
  }
  /*Code TVA*/
  .row .cell-th:nth-child(2),.row .cell-td:nth-child(2){
      width: 5%;
  }
  /*Remise*/
  .row .cell-th:nth-child(6),.row .cell-td:nth-child(6){
      width: 7%;
  }

<div class="table">
          <div class="row">
            <div class="cell-th">Code Article</div>
            <div class="cell-th">Code TVA</div>
            <div class="cell-th">Désignation</div>
            <div class="cell-th">Qté</div>
            <div class="cell-th">P.U.TTC</div>
            <div class="cell-th">Remise</div>
            <div class="cell-th">Montant TTC</div>
          </div>
          <div class="template"> <div class="row">
            <div class="cell-td">DV21-10030</div>
            <div class="cell-td">20</div>
            <div class="cell-td">LIT ELECTRIQUE HAYDN  AVEC BARRIERE BOIS MILANO + POTENCE</div>
            <div class="cell-td">1</div>
            <div class="cell-td">15 800,00</div>
            <div class="cell-td">0</div>
            <div class="cell-td">15 800,00</div>
          </div> <div class="row">
            <div class="cell-td">DV21-10030</div>
            <div class="cell-td">20</div>
            <div class="cell-td">MATELAS GAUFRIER MONO-PORTANCE AVEC HOUSE ZIPPEE SUR COTES</div>
            <div class="cell-td">1</div>
            <div class="cell-td">2 450,00</div>
            <div class="cell-td">0</div>
            <div class="cell-td">2 450,00</div>
          </div> <div class="row">
            <div class="cell-td">DV21-10030</div>
            <div class="cell-td">20</div>
            <div class="cell-td">FRAIS DE TRANSPORT</div>
            <div class="cell-td">300</div>
            <div class="cell-td">1,00</div>
            <div class="cell-td">0</div>
            <div class="cell-td">299,999</div>
          </div></div>
        </div>

i'd be appreciated if you could help me reaching a solution!