Flex-box row border

by Deividas Krupstas

HTML

<div class="flexbox">
  <div class="wrap"><span>First item</span></div>
  <div class="wrap"><span>Second item</span></div>
  <div class="wrap"><span>Third item</span></div>
  <div class="wrap"><span>Fourth item</span></div>
  <div class="wrap"><span>Fifth item</span></div>
  <div class="wrap"><span>Sixth item</span></div>
  <div class="wrap"><span>Seventh item</span></div>
  <div class="wrap"><span>Eigth item</span></div>
  <div class="wrap"><span>Nineth item</span></div>
  <div class="wrap"><span>tenth item</span></div>
  <div id="last" class="wrap"><span>Eleventh item</span></div>
</div>

CSS

div.flexbox {

  width:50%;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

span {
  border: 1px solid blue;
  margin: 5px;
}

.wrap {
  border-bottom: 1px solid black;
  padding: 5px;
  flex-grow: 1;
}
#last {
  flex-grow: 1000;
}