Remove the right margin of a flex-wrapped item [duplicate]

As shown in the below picture, there is a gap between the two flex item when the text in the first item is wrapped. Is there a way to remove this gap? Thank you.

.container {  display: flex;}.child-container {  display: flex;  flex-wrap: wrap;  background: green;  color: white;}.color-block {  background-color: blue;  width: 0.5rem;}

<div class="container"><div class="child-container"><div>← Previous Article:</div><div>A very long article title. A very long article title</div></div><div class="color-block"> </div></div>

Also on Jsfiddle Demo

Tried flex-basis, margin right, 0 shrink but nothing works