Ich versuche herauszufinden, wie Flexbox funktioniert (soll das funktionieren?…) Für Fälle wie diesen:

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}

<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage
    <br>ends</div>
  <div class="child">Forms &amp;
    <br>documents</div>
</div>

JSFiddle hier

Das Problem ist, dass ich, wenn genügend Platz vorhanden ist, um Elemente unterzubringen, ein hübsches, eng anliegendes Kind mit gleichmäßigem Abstand dazwischen bekomme. (Erstens, Top Div Block)

Wenn jedoch nicht genügend Platz vorhanden ist und der Text in den Kindern nicht richtig passt, geht alles in eine seltsame Richtung - Kinder sitzen nicht mehr fest und obwohl nach dem Wickeln genügend Platz um die flexiblen Kinder herum vorhanden ist, weil sie nicht richtig passen space-around hat nicht mehr wirklich die chance zu arbeiten (second div block)

Jedoch, WENN ich manuelle Zeilenumbrüche an Stellen hinzufüge, an denen die automatischen Zeilenumbrüche auftreten, wird alles so angeordnet, wie es "sollte" ... (unten, dritter Block)

Was ich möchte, ist, dass Kinder immer fest in ihre Kästchen (schwarze Ränder) eingepasst sind und der verbleibende Platz gleichmäßig zwischen ihnen verteilt wird, ohne dass ich manuelle Zeilenumbrüche hinzufügen muss (was bei mir keine Option ist) Fall

Ist es überhaupt möglich?…