行内嵌的flexbox列，具有全高度子项

Question

我试图用嵌套的flexbox制作一个盒子树。 我做了一个演示：http://jsbin.com/girucimizu/edit?html,css,output

外部容器的flex-direction为row，内部容器为column。

我还制作了一张图片来展示我的目标：

我得到的是左侧，我需要的是右侧。 我想在垂直方向上均匀地展开盒子。

我尝试应用我在其他线程中找到的CSS，但没有一个能够工作，例如：

.stage {
  flex: 1;
  height: 100%;
}

我怎样才能完成它？

Answer 1

将宽度应用于等于div宽度+边距的舞台div和justify-content:space-aound div上的stage

＆＃13;

＆＃13;

.App {
  display: flex;
  height: 100%;
}

.stage {
  display: flex;
  width: 52px;
  flex-direction: column;
  justify-content: space-around;
}

.box {
  height: 50px;
  width: 50px;
  background-color: red;
  margin: 1px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;