在Flexbox中连续垂直对齐不同高度的框

Question

我正在使用Flexbox，我正在尝试创建这样的东西：

我想要三个父母＆＃34;在行内垂直对齐的框。每个盒子都有不同的高度。

在代码段中（Codepen在这种情况下更好，因为Stack中有一个字符限制）我试图复制第一个框作为开始，框浮动到顶部。它们没有垂直对齐：

＆＃13;

＆＃13;

.box, .box-first, .box-large, .box-nested, .box-row {
    position: relative;
    box-sizing: border-box;
    min-height: 1rem;
    margin-bottom: 0;
    background: #007FFF;
    border: 1px solid #FFF;
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.box-nested {
    background: #036;
    border-color: #007FFF;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" rel="stylesheet"/>
<div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row"> <div class="col-xs-12"> <div class="box-first box-container"> <div class="row"> <div class="col-xs-2"> <div class="box-nested"> <img style="width:30px; height:auto;" src="https://cdn0.iconfinder.com/data/icons/simplicity/512/dollar-256.png"/> </div></div><div class="col-xs-5"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">111 222</div><div class="box-nested">105,306</div></div></div></div><div class="col-xs-5"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">111</div><div class="box-nested">222</div></div></div><div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">105,306</div></div></div></div></div></div></div></div></div></div></div></div></div>

＆＃13;

＆＃13;

＆＃13;

当我尝试在CSS中添加display: flex; align-items: center;时，它会与嵌套的div混淆：

我对Flexbox并不熟悉，我在网上看到过很多不同版本的帮助。