flexbox模型不会产生父容器的100％高度

Question

使用以下CSS：

#menusidebar {
    background-color: #6BC9DB;
    margin: 0 0 0 0;
    height: 100vh;
}

this page的左侧边栏未到达其父容器#content-wrap的底部。

更新： 我尝试使用弹性盒模型：

.flex {
    display: -webkit-flex;
    display: flex;
    flex-grow: 1;
}

<div id="content-wrap" class="fluid clearfix flex" data-content="content">
  <aside role="complementary" class="two columns" id="menusidebar">

但是flex元素#menusidebar的子元素不会占用flex父#content-wrap的所有剩余空间。

Answer 1

这是您的一个开始，使用您的示例链接

Raspberry Pi

我改变了这些规则

#content-wrap {
    background-color: #FFF;
    margin: 0;
    display: flex;
}
.column, .columns {
    display: inline;
    flex: 1;
    margin-left: 10px;
    margin-right: 10px;
}
#menusidebar {background-color: #6BC9DB; margin: 0 0 0 0;}

Answer 2

坚持使用flexbox策略，因为那是最具前瞻性的策略。将以下样式添加到容器中：

align-items: stretch;

取消对子元素设置的任何高度（具体为#menusidebar）。