这些元素没有高度，除非你告诉它们有高度，除非有内容。
如果你想让元素有100%的高度，那就把它添加到你的CSS中。

另外，您真的不应该过多地使用!important。

* {
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
}
.flexbox {
  display: -webkit-flex;
  display: -ms-flexbox, display: flex;
  overflow: hidden;
  height: 100%;
}
.flexbox .flexbox-col {
  height: 100%;
  flex: 1;
}
#sidebar {
  background: #f00;
}
#page-content {
  background: #bada55;
}

<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>
</div>

下面codepen（http://codepen.io/Kebten/pen/PqNVrW）有一个侧边栏，其中有一个列表，占据了可用的垂直空间--我假设这就是你问题的重点：-）
添加背景颜色作为辅助。

<div id="mainWrapper" class="main-grid clearfix flexbox">
    <div id="sidebar" class="opened left flexbox-col">
        <ul>
            <li>sidebar</li>
            <li>sidebar</li>
            <li>sidebar</li>
            <li>sidebar</li>
            <li>sidebar</li>
       </ul>
    </div>
    <div id="page-content" class="page-content flexbox-col">
        <ul>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
        </ul>
    </div>
</div>

#sidebar {
    background-color: pink;
}
#page-content {
    background-color: green;
}
.flexbox {
    display: flex;
}
.flexbox .flexbox-col {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#sidebar ul {
    background-color: red;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
#sidebar ul li {
    flex-grow: 1;
}
#page-content ul {
    background-color: yellow;
}

HTML似乎缺少一个div，但似乎不影响结果。