Internet Explorer 10中的嵌套块表布局中断

Question

我有嵌套的块表。

.cell_group,
.cell_group--root,
.cell_group--nested {
  display: table;
  border-collapse: collapse;
}
.cell_group__row {
  display: table-row;
}
.cell_group__cell,
.cell_group__edge_cell {
  display: table-cell;
  height: 1px;
  box-shadow: inset 0 0 0 1px #f00;
}
.cell_group__edge_cell {
  padding: 5px;
}
.cell_group__wrapper {
  width: 100%;
  height: 100%;
}
.cell_group--nested {
  height: 100%;
}

<div class="cell_group">
  <div class="cell_group__row">
    <div class="cell_group__edge_cell">test</div>
    <div class="cell_group__cell">
      <div class="cell_group--nested">
        <div class="cell_group__row">
          <div class="cell_group__edge_cell">test</div>
        </div>
        <div class="cell_group__row">
          <div class="cell_group__edge_cell">test</div>
        </div>
      </div>
    </div>
    <div class="cell_group__cell">
      <div class="cell_group--nested">
        <div class="cell_group__row">
          <div class="cell_group__edge_cell">test</div>
        </div>
        <div class="cell_group__row">
          <div class="cell_group__edge_cell">test</div>
        </div>
        <div class="cell_group__row">
          <div class="cell_group__edge_cell">test</div>
        </div>
      </div>
    </div>
  </div>
</div>

在所有主流浏览器上一切正常，但是在IE10中却不行。中央列无法填充容器的整个高度，并留有空间。如何使中央单元平均分配到整个柱子的高度？