I couldn't find a way to style parent & child, so that it behaves like Version 1 & 3 depending on the content:

The content is unknown, could be "A", "B" & "C" or "A", "B" & "VERYLONG", … could be more than 3 elements. This eliminates media width queries.

I thought of something like this:

body {
  max-width: 200px;
}

container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: direction;
}