inline-flex space-between sample

見ての通り複数行には適さない

HTML

<h3>
1.
</h3>
looks like
<div class="IwillForceAgivenWidth" style="width: 350px">
  <div class="parent">
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
  </div>
</div>

should look like.
<div class="IwillForceAgivenWidth" style="width: 350px">
  <div class="parent" style="width: 291px">
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
  </div>
</div>

<h3>
2.
</h3>
looks like
<div class="IwillForceAgivenWidth" style="width: 252px">
  <div class="parent">
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
  </div>
</div>

should look like.
<div class="IwillForceAgivenWidth" style="width: 250px">
  <div class="parent" style="width: 195px">
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text here</button>
    <button class="child">some text...

CSS

* {
  margin: 0;
  padding: 0;
}

.IwillForceAgivenWidth {
  background-color: yellow;
}


.parent {
  border: 1px solid red;
  /* what can I put in here to dynamically solve this */
}

.child {
  margin-right: 1px;
  /* what can I put in here to dynamically solve this */
}