CSS 显示 : box with box-align stretch and center at the same time

Question

所以我有一个 flex-box，或者更准确地说只有一个盒子(display: box)，因为这是 Sass Compass 生成的。

我希望它:

1. 根据内容设置高度
2. 使“列”拉伸(stretch)，以便它们的背景填满整个父级
3. 让列的内容垂直居中。

像这样:

see it on jsbin

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

在上面的例子中我使用了

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

问题是我无法指定固定高度，因为高度由第 3 列(石灰)的内容决定。

没有 javascript 有什么方法可以解决这个问题吗？嵌套的 flex-boxes(试过但不能工作)？显示:表格如上？

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