Make a tight wrap of div of its content

Question

I have a div with a max-width, when div content is too long to fit into one line (which is ok) it causes the div not to tightly wrap the content, so it looks like there is some redundant padding (which looks bad)

Here is a demo jsfiddle that shows the issue, I'm trying to figure out how to get rid of the gap between the end of the text inside the div and div's right border

Here is the code form the jsfiddle

.parent {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 50px;
  max-width: 140px;
}

.box {
  width: 16px;
  height: 16px;
}

.red {
  background-color: red;
}

.salmon {
  background-color: salmon;
}

<div class="parent">
  <div class="text salmon">
    The quick brooooown fox
  </div>
  <div class="box red">
  </div>
</div>

<div class="parent">
  <div class="text salmon">
    The quick brown fox
  </div>
  <div class="box red">
  </div>
</div>

<div class="parent">
  <div class="text salmon">
    The very quick brown fox
  </div>
  <div class="box red">
  </div>
</div>