html - 如何对具有不同高度的元素使用 flex row

Question

例如，我正在尝试像这样堆叠具有不同高度的 block :

.container {
  display: flex;
  flex-flow: row wrap;
}
.box {
  width: 50%;
  height: 50px;
  background-color: lightgreen;
}
.box2 {
  width: 50%;
  height: 25px;
  background-color: lightgreen;
}

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

它应该如何:

Answer 1

据我所知，只有嵌套两个 <div class="box2"> 才能解决这个问题在 <div class="box"> 里面包装器

.container {
  display: flex;
  flex-flow: row wrap;
}

.box {
  width: 50%;
  height: 50px;
  background-color: lightgreen;
}

.box2 {
  width: 100%;
  height: 25px;
  background-color: lightgreen;
}

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

举个例子: https://jsfiddle.net/7j6uknck/2/