Растягивание блока на пустое пространство родительского элемента (div expand)

Сегодня столкнулся с неприятной проблемой - при блочной верстке понадобилось растянуть блок на пустое пространство родительского элемента по вертикали (div expand). Естественно, по горизонтали никакой трудности нету - просто задать отображение блочным (display: block) и будет счастье =).

Но тут другое. Есть родительский div, в нем три div’а (три колонки - средняя - контент, справа и слева - панели). Получается, что колонка с контентом может быть неограниченного размера, и надо подстроить размер боковых div’ов под нее (для чего? например, чтобы банально изменить цвет). Думал, height: 100% и счастье. Оказалось, все немного сложнее - при таком процентном указании высоты размер дива будет просто видимый размер окна со всеми вытекающими последствиями.

У необходимого свойства (которое позволяет решить поставленную задачу) нет единой поддержкой разными браузерами. Поэтому надо прописывать отдельно для каждого. Идея простая: для родительского div’а надо задать display, который разрешит растягивание внутренних элементов (-moz-box, -webkit-box, -ms-flexbox - в зависимости от браузера), а внутри блока, который надо растянуть задать значения -moz-flex-box, -webkit-flex-box, ms-flex, и т.д. (тоже в зависимости от браузера).

Свободное пространство родителя делится на сумму значений -moz-flex-box, -webkit-flex-box или ms-flex всех непосредственных потомков и распределяется между ними пропорционально их значениям.

Наша задача упрощена тем, что вертикально div’ов по одному.

Вот что получилось:

.parent_div {
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.left_div,
.right_div {
  -moz-flex-box: 1;
  -webkit-flex-box:1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  width: 200px;
}
.central_div{
  width: 100%;
}