Разрывы макетов вложенных блочных таблиц в 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.Центральный столбец не заполняет всю высоту контейнера и оставляет пространство.Как сделать так, чтобы центральные ячейки равномерно распределялись по всей высоте столбца?