Can flexbox container be made to shrink when wrapped?

Question

Here's a simple example of 2 flexbox layouts; 1 wraps, the other doesn't.

As you can see, the first example does not. And the flexbox params that I've applied make it shrink to fit its content.

The second one wraps, but instead of shrinking to its smallest size, it shrinks to the max-width that I've set.

This means, more often than not, that there is something spare at the end. However since I'm scrolling into this space, I need it to be exact.

Any ideas as to how this can be fixed?

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  background-color: lime;
  padding: 8px;
}

.flexbox {
  background-color:red;
  flex: 0 0 auto;
  display: inline-flex;
  max-width: 420px;
}

.flexbox-wrap {
  flex-wrap: wrap;
}

.child {
  background-color: aqua;
  flex: 0 0 auto;
  display: inline-flex;
  line-height: 32px;
  margin-top: 8px;
  padding: 0 12px;
}

<div class="container">
  <div class="flexbox">
    <div class="child">child</div>
    <div class="child">other child</div>
    <div class="child">child</div>
  </div>
</div>

<div class="container">
  <div class="flexbox flexbox-wrap">
    <div class="child">child</div>
    <div class="child">other child</div>
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">other child</div>
    <div class="child">child 3</div>
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">other child</div>
    <div class="child">child 3</div>
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
  </div>
</div>