Css 行内嵌套flexbox列，具有全高子级

我试图用嵌套的FlexBox创建一个盒子树。 我做了一个演示：

外部容器具有

行的
弯曲方向
，内部容器具有
列

我还制作了一个图像来形象化我的目标：


我得到的在左边，我需要的在右边。
我想在垂直方向上均匀地分布盒子

我尝试应用在其他线程中发现的CSS，但没有一个有效，例如：

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

如何实现它？
将宽度应用于stage div，等于div宽度+边距和
stage
div上的
对齐内容：空格a和


.App{
显示器：flex；
身高：100%；
}
.舞台{
显示器：flex；
宽度：52px；
弯曲方向：立柱；
证明内容：周围的空间；
}
.盒子{
高度：50px；
宽度：50px；
背景色：红色；
保证金：1px；
}

谢谢！为什么需要宽度？我不确定。我得再看看。