html - Flexbox target wrapped items -

i target flex items (random number of items) wrapped can remove borders last non-wrapped item in each row or first wrapped item in each row. use css pseudo-selector such made "last-flexitem-in-row" right border in case not appear. know can use js seems suboptimal , heavy-handed have way. imagine container width shrinks during browser resize, amount of calculation crazy.

any ideas?

.flexcontainer {    display: flex;    flex-wrap: wrap;  }    .flexcontainer li {    border-right: 3px solid #c00;    list-style: none;    flex: 0 0 100px;    padding: 10px;  }    .flexcontainer li:last-item-in-row {    border-right: none;  }

<ul class="flexcontainer">    <li>item one</li>    <li>item two</li>    <li>item three</li>    <li>item four</li>    <li>item five</li>    <li>item six</li>    <li>item seven</li>    <li>item eight</li>    <li>item nine</li>  </ul>

https://jsfiddle.net/sx9vhs11/

on particular layout, left borders aligned.

i have changed (as suggest) border on items left.

and have set little trick on container hide them using overflow hidden

.flexcontainer {    display: flex;    flex-wrap: wrap;    border-left: solid 40px transparent;    padding-left: 0px;    overflow: hidden;  }    .flexcontainer li {    border-left: 3px solid #c00;    list-style: none;    flex: 0 0 100px;    padding: 10px;    margin-left: -5px;    margin-right: 5px;  }    .flexcontainer li:last-item-in-row {    border-right: none;  }

<ul class="flexcontainer">    <li>item one</li>    <li>item two</li>    <li>item three</li>    <li>item four</li>    <li>item five</li>    <li>item six</li>    <li>item seven</li>    <li>item eight</li>    <li>item nine</li>  </ul>