CSS Flex full height sidebar

I'm trying to make sidebar with background, where its height is same as height of #page-content but I can't make it work. The Sidebar height is still same as its content.

Here is the css code:

.flexbox {    display: -webkit-flex !important;    display: -ms-flexbox !important;    display: flex !important;    overflow: hidden !important;}.flexbox .flexbox-col {    flex: 1;}<div id="mainWrapper" class="main-grid clearfix flexbox"><div id="sidebar" class="opened left flexbox-col"></div> <div id="page-content" class="page-content flexbox-col"></div>