Comment puis-je séparer l'élément du milieu en nouvelles lignes si son contenu ne rentre pas en utilisant uniquement du CSS ?

Question

Ce qui suit est plus un exemple général.

<div>
  <div>Short dynamic text.</div>
  <div id="in-between">Possible long dynamic text...</div>
  <div>Short dynamic text.</div>
</div>

Possibilité de modifier l'ordre ou le type des éléments au préalable ou d'ajouter des assistants entre les deux. Tout le texte n'est pas enveloppé. Il n’est pas nécessaire de donner une largeur ou une hauteur fixe.

Comment obtenir cet effet en utilisant uniquement CSS au lieu de changer le DOM ? Alors, comment séparer l'élément du milieu en une nouvelle ligne si le contenu ne rentre pas ? Est-il possible?

Quelques extraits pour expliquer plus en détail et tester.

.example {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  justify-content: space-between;
}

.example .separate {
  flex-grow: 1;
}

.example .long-b {
  order: 1; /* this should happen by some magic */
}

/* do not change below */

.container {
  border: 0.5rem solid black;
  background: blue;
}

.element {
 border: 0.5rem solid yellow;
 padding: 0.5rem;
 color: white;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.short-a:before {
  content: "only three words";
}

.short-b:before {
 content: "flag";
}

.short-c:before {
  content: "i love stackoverflow";
}

.short-d:before {
 content: "attribute";
}

.long-a:before {
  content: "i am not that long";
}

.long-b:before {
  content: "i am very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long";
}

<div class="container example">
  <div class="element short-a"></div>
  <div class="element separate long-a"></div>
  <div class="element short-b"></div>
</div>
<br />
<div class="container example">
  <div class="element short-c"></div>
  <div class="element separate long-b"></div>
  <div class="element short-d"></div>
</div>

La réponse actuelle est utile et acceptable. Cependant, existe-t-il (ou y aura-t-il) d'autres moyens qui n'utilisent pas de flotteurs ?

Answer 1

float est la seule solution ici, mais vous devrez ajuster la structure HTML (je sais que cela va à l'encontre de ce que vous demandez, mais ce qui suit pourrait vous donner quelques idées)

.box {
  border:1px solid red;
  padding: 3px;
  /* to debug */
  overflow: hidden;
  resize: horizontal;
  /**/
}
.box > div {
  border: 1px solid #000;
  box-sizing: border-box;
}

.box > :first-child {
  float: left;
}
.box > :nth-child(2) {
  float: right;
}

#in-between {
  display: inline-block;
  
  /* remove the below if you want text wrap instead of ellpsis*/
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

  
Short dynamic text.
  
Short dynamic text.
  
Possible long dynamic text Possible long text