I have a flex container with direction row with 3 childs where the first has an intrinsic size and the others have a fixed width and height.

I would like the ones with the fixed size to always be placed right after the first one. This works as long as the content of the first one doesn’t wrap. As soon as the first one wraps, it grows to fill the remaining space of the parent which produces an unwanted gap between the first & the second child:

Playground & code

https://codepen.io/skaface/pen/xxvxwoM

<div class="flex-container">
  <div class="child-dynamic">longword word longword word longword word...</div>
  <div class="child-fixed"></div>
  <div class="child-fixed"></div>
</div>

<div class="flex-container">
  <div class="child-dynamic">short</div>
  <div class="child-fixed"></div>
  <div class="child-fixed"></div>
</div>

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  
  width: 300px;
  margin-bottom: 100px;
  border: 1px solid black;
}

.child-dynamic {
  background: rgb(254 202 202);
}

.child-fixed {
  width: 16px;
  height: 16px;
  background: rgb(74 222 128);
}