階層の違うblock要素をflexで並べたい

Question

階層の違うblock要素をflexで横並びにしたり、折り返したりしたいです。
一般的には以下のような感じだと思います。

<div class="flex">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.flex {
  display: flex;
  flex-wrap: wrap;
}

ただ今回は以下の場合のclass="box"の要素を上記同じような表示にしたいです。一般的にはあまりやらないことだと思うので、調べてもあまりでてこず、質問させていただきました。HTMLとCSSのみでできなければJSを使ってもいいと思っています。

<div>
  <div class="box"></div>
  <div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Answer 1

display: contents;を使うのはどうですか。（IEは非対応ですが）

[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック | コリス

<div class="flex">
  <div class="box">box1</div>
  <div class="contents">
    <div class="box">box2</div>
    <div class="box">box3</div>
  </div>
</div>

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex .contents {
  display: contents;
}