css display：盒子对齐拉伸和同时居中

Question

所以我有一个弹性盒子，或者更确切地说只有一个盒子（display: box），因为这就是Sass Compass生成的。

我希望它：

1. 基于其内容的高度
2. 使“列”伸展，使其背景填满整个父级
3. 使列的内容垂直居中。

像这样：



see it on jsbin

问题是上面列表中的要求2和要求3发生冲突。我可以将内容垂直居中于box-align: center，但要延伸背景我必须使用box-align: stretch。

在上面的例子中，我正在使用

#div1 { display: table; height: 150px; }
#div1 > div { display: table-cell; vertical-align: middle; }

问题是我无法指定固定高度，因为高度取决于第3列（石灰）的含量。

没有javascript可以解决这个问题吗？嵌套的弹性盒（试过但不能上班）？显示：表格如上？

Answer 1

如果您只是想要获得三个相同高度的列，与内容一起增长并具有垂直对齐，我认为不需要flex box css

如果您只使用以下结构

<div class="table">
    <div class="cell" id="cell1"></div>
    <div class="cell" id="cell2"></div>
    <div class="cell" id="cell3"></div>
</div>

您可以使用以下样式：

.table {display:table; width:100%;}
.cell {display:table-cell; vertical-align:middle; width:33.33%;}

Example