title: Add dividing line between flex items with equal space distribution
body: <p>I have a list with different items which have auto widths (no fixed width can be given in my case). I use <code>justify-content: space-between</code> because my first item has to start at the beginning of the container and my last item at the end.</p>
  
  <p>All of the above works fine, but whenever I try to add a line between these list items, the problems start to emerge. I have no way to determine how many px or % I have to position these lines. Is there any way to 'dynamically' position the lines between the different list-items or not?</p>
  
  <p><strong>The html we are using is not editable as it is rendered by the CMS we are using.</strong></p>
  
  <p>This is what I have:</p>
  
  <p><a href="https://i.stack.imgur.com/4Gm5D.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4Gm5D.png" alt="This is what I have"></a></p>
  
  <p>This is what I try to achieve</p>
  
  <p><a href="https://i.stack.imgur.com/bINz2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bINz2.png" alt="Here is what I would like to achieve"></a></p>
  
  <p>Here is the code I currently have</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
      box-sizing: border-box;
  }
  
  .Container {
      max-width: 70%;
      margin-right: auto;
      margin-left: auto;
      background: blue;
      padding-top: 20px;
      padding-bottom: 20px;
  }
  
  .Flex {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .Flex-item {
      background: red;
      position: relative;
  }
  
  .Flex-item:after {
      content: "";
      position: absolute;
      background: white;
      width: 1px;
      height: 40px;
      top: 50%;
      transform: translateY(-50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Container"&gt;
      &lt;ul class="Flex"&gt;
           &lt;li class="Flex-item"&gt;Lorem&lt;/li&gt;
           &lt;li class="Flex-item"&gt;consectetur&lt;/li&gt;
           &lt;li class="Flex-item"&gt;vestibulum&lt;/li&gt;
           &lt;li class="Flex-item"&gt;nec&lt;/li&gt;
           &lt;li class="Flex-item"&gt;condimentum&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>