Pixel wide gaps between each <div> with flexbox due to pixel rounding error

Question

How do I remove the black lines that seem to be caused by errors in rounding fractions of a pixel? This appears to be an issue with Chrome only, Firefox seems to be doing more intelligent rounding and renders it perfectly.

Is there an easy solution for this problem?

This is how Chrome renders it:

  .container {
    height: 100px;
    width: 100%;
    background-color: black;
    display: flex;
    flex-flow: nowrap column;
  }
  .row {
    background-color: lightgreen;
    flex: 1 1 auto;
  }

<div class="container">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

Answer 1

you may try to fil the gap(?) with box-shadow

.container {
    height: 100px;
    width: 100%;
    background-color: black;
    display: flex;
    flex-flow: nowrap column;
  }
  .row {
    background-color: lightgreen;
    flex: 1 1 auto;
    box-shadow:0 1px lightgreen;
  }

<div class="container">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>