我有一行flexbox，其中包含3列，也是flexbox。其中一个柱子比其他柱子高，所以较短的柱子伸展以匹配它的高度。但是，当我在列上设置flex-direction: column并使用基于弹性基础百分比的元素填充其中时，它在Chrome或Opera中不起作用。
适用于Firefox和IE。如果我在列上设置特定高度但它不能这样做也可以。我也不想使用flex-grow属性来尝试这样做，因为如果添加或删除元素，大小会发生变化。有没有人知道在Chrome和Opera中使用它的解决方法？
<div class="row">
<div class="column col-1">
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
</div>
<div class="column col-2">
<div class="cell cell-1">1</div>
<div class="cell cell-2">2</div>
<div class="cell cell-3">3</div>
</div>
<div class="column col-3">
3
</div>
</div>
.row {
display: flex;
}
.column {
background: blue;
display: flex;
flex-direction: column;
margin: 5px;
}
.col-1 {
flex: 0 1 16.666%;
}
.col-2 {
flex: 0 1 33.333%;
}
.col-3 {
flex: 0 1 50%;
}
.cell {
background: gold;
margin: 5px;
}
.cell-1 {
flex: 0 1 16.666%;
}
.cell-2 {
flex: 0 1 33.333%;
}
.cell-3 {
flex: 0 1 50%;
}