Expanding a block to the empty space of the parent element (div expand)

Today I came across an unpleasant problem - when using block layout, I needed to stretch a block to fill the empty space of the parent element vertically (div expand). Naturally, there is no difficulty in doing this horizontally - simply set the display to block and it will work =).

But here's the thing. There is a parent div, within it, there are three divs (three columns - middle - content, right and left - panels). So, the content column can have an unlimited size, and we need to adjust the size of the side divs accordingly (for example, to simply change the color). I thought that height: 100% would do the trick. But it turned out to be a bit more complicated - with this percentage-based height declaration, the size of the div would simply be the visible window size with all the consequences.

The necessary property (which allows solving the task) is not uniformly supported by different browsers. So it needs to be specified separately for each one. The idea is simple: for the parent div, you need to set the display that allows stretching of the inner elements (-moz-box, -webkit-box, -ms-flexbox - depending on the browser), and inside the block that needs to be stretched, set the values for -moz-flex-box, -webkit-flex-box, ms-flex, etc. (also depending on the browser).

The available space of the parent is divided by the sum of the values of -moz-flex-box, -webkit-flex-box or ms-flex of all immediate children and distributed proportionally between them based on their values.

Our task is simplified because there is only one div vertically.

Here is what we have:

.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%;
}