Nested flexbox row wrap order?

Question

I am designing a nested flexbox for variable screen width. There should be three boxes, arranged in the following way:

<div class="wrapper1">
  <div class="object obj1"></div>
  <div class="wrapper2">
    <div class="object obj2"></div>
    <div class="object obj3"></div>
  </div>
</div>

Wrapper1 is 100% wide with centered content.

Now I want the following scenario.

1. When screen is wide enough, the three boxes must be arranged in a horizontal row.
2. When screen is narrow enough, the three boxes must be arranged in a vertical column.
3. When screen width is such that only 2 boxes fit horizontally, wrapper1's row should not break, whereas wrapper2's row should, creating the following disposition:

My problem is that I can't find a flex configuration to do this. What I've tried so far:

1. Using flex: 1 0 auto; on wrapper2. This works as far as row breaks are concerned, but wrapper2 does not shrink to its content's width, so the boxes lose center and flush to the left.
2. Using flex: 0 1 <2 * object-width>; on wrapper2. This keeps together wrapper2's row too strongly, and breaks wrapper1's row instead. (Against scenario No. 3.)
3. Using flex: 0 1 auto or setting max-width: min-content; on wrapper2, but this never lets wrapper2's row to stretch out horizontally. (Against scenario No. 1.)

So I'm asking you gurus out there if it is possible at all to realize a solution for my design.

Here is my JsFiddle.

Answer 1

You will need a media query (or script) to accomplish that properly, and the reason is that when the children won't fit their parent's width, it's the outer siblings that will wrap, before inner one's does, and this is the normal wrapping order, regardless of using Flexbox or not.

Since we know the width of each item, sum them plus the borders, and we get a break point at 608px + the body margin, which I here reset to 0, as it might differ between the browsers.

Then, at the break point, you simply e.g. change flex: 1 0 auto to flex: 0 0 auto, and it will wrap and center properly.

Updated fiddle

Stack snippet

body {
  margin: 0;
}
.wrapper1 {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  border: 2px solid blue;
}
.wrapper2 {
  display: flex;
  flex-flow: row wrap;
  flex: 1 0 auto;
  min-width: 200px;
  max-width: 400px;
  border: 2px solid red;
}
.object {
  flex: 0 0 200px;
  height: 100px;
}
.obj1 {
  background-color: #aaccaa;
}
.obj2 {
  background-color: #ccaaaa;
}
.obj3 {
  background-color: #aaaacc;
}

@media (max-width: 608px) {
  .wrapper2 {
    flex: 0 0 auto;
  }  
}

<div class="wrapper1">
  <div class="object obj1"></div>
  <div class="wrapper2">
    <div class="object obj2"></div>
    <div class="object obj3"></div>
  </div>
</div>