Add dividing line between flex items with equal space distribution

Question

I have a list with different items which have auto widths (no fixed width can be given in my case). I use justify-content: space-between because my first item has to start at the beginning of the container and my last item at the end.

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?

The html we are using is not editable as it is rendered by the CMS we are using.

This is what I have:

This is what I try to achieve

Here is the code I currently have

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

<div class="Container">      <ul class="Flex">           <li class="Flex-item">Lorem</li>           <li class="Flex-item">consectetur</li>           <li class="Flex-item">vestibulum</li>           <li class="Flex-item">nec</li>           <li class="Flex-item">condimentum</li>      </ul>  </div>

Answer 1

I'm using this solution on a project I'm working on.

It sets justify-content: space-between; on the flex container and flex: 1 1 auto; on the children with a left border on all childrens except first.

I modified your example CSS so you can have a look. I wasn't sure if you were going to have background color on the children so I just used line-height to get larger borders.

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 {      flex: 1 1 auto;      background: red;      position: relative;      text-align: center;      line-height: 40px;  }    .Flex-item + .Flex-item {      border-left: solid 1px white;  }    /** Optional for OPs exact layout */    .Flex-item:first-child {      text-align: left;  }    .Flex-item:last-child {      text-align: right;  }

<div class="Container">      <ul class="Flex">          <li class="Flex-item">Lorem</li>          <li class="Flex-item">consectetur</li>          <li class="Flex-item">vestibulum</li>          <li class="Flex-item">nec</li>          <li class="Flex-item">condimentum</li>      </ul>  </div>

No modification to HTML.

Answer 2

You can make it work by using a nested flexboxes - I understand you can't change the markup, but at least you have to wrap the contents of the li into a span like I have here:

1. Make .flex-item also a flexbox with the text in a span (this would have the red background now) and the separator as an :after element

2. Apply flex-grow and flex-shrink to 1 and flex-basis to auto for the Flex-item.

3. The flex: 0 to the last Flex-item and margin-auto to the :after also contributes to the effect.

A demo may explain it better - see below:

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;    justify-content: space-between;    list-style: none;    margin: 0;    padding: 0;  }  .Flex-item {    display: flex;    justify-content: space-between;    align-items: center;    flex: 1 1 auto;  }  .Flex-item span {    background: red;  }  .Flex-item:not(:last-child):after {    content: "";    border: 1px solid white;    height: 40px;    margin: auto;  }  .Flex-item:last-child {    flex: 0;  }

<div class="Container">    <ul class="Flex">      <li class="Flex-item">        <span>Lorem</span>      </li>      <li class="Flex-item">        <span>consectetur</span>      </li>      <li class="Flex-item">        <span>vestibulum</span>      </li>      <li class="Flex-item">        <span>nec</span>      </li>      <li class="Flex-item">        <span>condimentum</span>      </li>    </ul>  </div>