"display:table-cell"的孩子身高100%

我拿了一个我发现的定价表HTML/CSS/JS,并决定尝试弯曲它以满足我对给定页面的需求.不幸的是,我碰到了一堵墙.以下小提琴是目前表格的HTML和CSS的简单示例:

https://jsfiddle.net/jv89hopf/1/

为了使各列均匀地间隔开出跨页的宽度,无论我使用的列数的display:table,table-layout:fixed和display:table-cell.这非常有效,当我添加或删除列时,表会根据需要进行调整以填充空间

现在问题是当一列高于其他列时.我希望所有列都能拉伸以匹配最高柱的高度.

查看Chrome检查器时,我可以看到表格单元格完全填满了高度:

现在我需要的是这个表格单元格的子节点填充高度(在上面提供的小提琴中,这将是.price-wrapper- 它需要填充.price-list li)

我试过了两个:

height: 100%

position: absolute; top:0; bottom:0; left:0; right:0;

前者由于某种原因没有做任何事情,后者倒塌.price-list到0像素高(因为只有高度的孩子绝对定位,因此从流程中移除)

如果我能够.price-wrapper正确地达到100%的高度,.price-list li那么我可以使用display:table并将display:table-row"立即购买"按钮推到底部并获得所需的外观:

一个解决方案是用百分之百的高度.price-list,.price-list > li并.price-wrapper会使孩子身高适合的内容.

.price-list {
    display: table;
    height: 100%; //Here
    list-style: outside none none;
    margin: 0;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}

.price-list > li {
  display: table-cell;
  padding: 0 10px;
  height:100%; //Here
}

.price-wrapper {
    background-color: #fff;
    height: 100%; //Here
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

工作小提琴