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);}

Update

This has been marked as duplicate of Make container shrink-to-fit child elements as they wrap.

However, this question is 8 years old and has no working "CSS only" answer and I'm curious on whether there's still no CSS only solution to date.

Maybe it is possible to achieve the wanted layout with grid nowadays?