How to style space between items? - css

Question

Is it possible to style spaces between items in flex?
Case Scenario:
I have a kind of table/grid
I don't want items to grow (flex-grow: 0)
I don't want space-between items
If there is not enough remaining space, next item falls to next line
Example:
Fiddle:
https://jsfiddle.net/t245o0vr/21/
Desired effect:
I would like to add a border-bottom in those spacing in the end. You think it's possible? Any ideas?
.container {
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
border-bottom: 0;
max-width: 470px; /* for the sake of example */
}
.item {
display: inline-flex;
padding: 10px;
border-bottom: 1px solid #ccc;
}
<div class="container">
<div class="item">
itemA
</div>
<div class="item">
itemBitemB
</div>
<div class="item">
itemCCCC
</div>
<div class="item">
itemA
</div>
<div class="item">
itemBitemB
</div>
<div class="item">
itemCCCC
</div>
<div class="item">
itemA
</div>
<div class="item">
itemBitemB
</div>
<div class="item">
itemCCCC
</div>
</div>

Answer 1

This solutions is not based in flex (I also would like to know how to solve it with any flex'ish rule) but it works.
Instead of adding border to elements add and absolute positioned &:after pseudo-element on every item and hide the overflow in parent
.container {
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
border-bottom: 0;
max-width: 470px; /* for the sake of example */
overflow: hidden; /* <------- new */
}
.item {
display: inline-flex;
padding: 10px;
/* border-bottom: 1px solid #ccc; <---- removed */
position: relative; /* <------- new */
}
.item:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100vw; /* Bigger enough :P */
border-bottom: 1px solid #ccc;
}
<div class="container">
<div class="item">
itemA
</div>
<div class="item">
itemBitemB
</div>
<div class="item">
itemCCCC
</div>
<div class="item">
itemA
</div>
<div class="item">
itemBitemB
</div>
<div class="item">
itemCCCC
</div>
<div class="item">
itemA
</div>
<div class="item">
itemBitemB
</div>
<div class="item">
itemCCCC
</div>
</div>

Answer 2

I would consider another way using gradient. The trick is to have a gradient that will get repeated each line to cover each new line that will appear. You simply need to know the height of your line which is based on the line-height and padding
.container {
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
line-height:1.2em;
background:
repeating-linear-gradient(to bottom,
transparent 0,transparent calc(1.2em + 20px),
#ccc calc(1.2em + 20px),#ccc calc(1.2em + 21px));
max-width: 470px; /* for the sake of example */
}
.item {
display: inline-flex;
padding: 10px;
}
<div class="container">
<div class="item">
itemA
</div>
<div class="item">
itemBitemB
</div>
<div class="item">
itemCCCC
</div>
<div class="item">
itemA
</div>
<div class="item">
itemBitemB
</div>
<div class="item">
itemCCCC
</div>
<div class="item">
itemA
</div>
<div class="item">
itemBitemB
</div>
<div class="item">
itemCCCC
</div>
</div>