Html Flex侧边栏：如何增长到100%的高度

我正在使用CSS flex构建一个边栏，我需要它垂直增长以填充整个屏幕的垂直高度。这是我正在做的一个骨架

.app{
显示器：flex；
弯曲方向：行；
.对齐项目：灵活启动；
身高：100%；
宽度：100%；
}
.侧边栏{
背景色：红色；
身高：100%；
}
.内容{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
.内容标题{
弹性：1；
背景颜色：灰色；
}
.主要内容{
弹性：1；
背景颜色：黄色；
}
这是侧边栏
内容头
这是主要内容

小提琴呢

其中一个父容器的高度不是100%

小提琴呢

---

其中一个父容器的高度不是100%

我想我通过为容器指定完整的视口高度，然后从

.content

子容器中删除

flex:1

，已经非常接近了

.app{
显示器：flex；
弯曲方向：行；
.对齐项目：灵活启动；
高度：100vh；
宽度：100%；
}
.侧边栏{
背景色：红色；
}
.内容{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
.内容标题{
背景颜色：灰色；
}
.主要内容{
背景颜色：黄色；
}

这是侧边栏
内容头
这是主要内容

我想，通过将整个视口高度指定给容器，然后从

.content

子对象中删除

flex:1

，我已经非常接近了

.app{
显示器：flex；
弯曲方向：行；
.对齐项目：灵活启动；
高度：100vh；
宽度：100%；
}
.侧边栏{
背景色：红色；
}
.内容{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
.内容标题{
背景颜色：灰色；
}
.主要内容{
背景颜色：黄色；
}

这是侧边栏
内容头
这是主要内容
正确使用Flexbox，是通过使用
高度：100vh
，或给html/body一个高度，
html，body{height:100%
}，使
应用程序的高度达到预期的高度

其次，当您使用
align items:flex start
时，所有项目最初都会在顶部对齐，但通过将
align self:stretch
添加到
侧栏，它将填充其父项的高度

注意，对于弹性行项目，不应使用
height:100%
，应使用
align-*
属性

注2，
content header
和
content main
上的集合
flex:1
没有任何影响，除非它们的父级
content
的高度高于它们的总高度。i、 e.如果要将
应用程序的
对齐项目
更改为
拉伸
（如果，则可以删除
侧栏上的
自对齐
）

注3，
flex:1
在IE中无法正常工作，请改用
flex-grow:1
或分配所有值，其中
flex-basis
应为
auto
，即
flex:1 auto

堆栈片段


正文{
保证金：0；
}
.app{
显示器：flex；
弯曲方向：行；
调整项目：灵活启动；
高度：100vh；/*已更改*/
宽度：100%；
}
.侧边栏{
背景色：红色；
自对齐：拉伸；/*已添加*/
}
.内容{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
.内容标题{
flex:1；/*对于IE，“flex增长：1”或“flex:1自动”
*/
背景颜色：灰色；
}
.主要内容{
flex:1；/*对于IE，“flex增长：1”或“flex:1自动”
*/
背景颜色：黄色；
}

这是侧边栏
内容头
这是主要内容
正确使用Flexbox，是通过使用
高度：100vh
，或给html/body一个高度，
html，body{height:100%
}，使
应用程序的高度达到预期的高度

其次，当您使用
align items:flex start
时，所有项目最初都会在顶部对齐，但通过将
align self:stretch
添加到
侧栏，它将填充其父项的高度

注意，对于弹性行项目，不应使用
height:100%
，应使用
align-*
属性

注2，
content header
和
content main
上的集合
flex:1
没有任何影响，除非它们的父级
content
的高度高于它们的总高度。i、 e.如果要将
应用程序的
对齐项目
更改为
拉伸
（如果，则可以删除
侧栏上的
自对齐
）

注3，
flex:1
在IE中无法正常工作，请改用
flex-grow:1
或分配所有值，其中
flex-basis
应为
auto
，即
flex:1 auto

堆栈片段


正文{
保证金：0；
}
.app{
显示器：flex；
弯曲方向：行；
调整项目：灵活启动；
高度：100vh；/*已更改*/
宽度：100%；
}
.侧边栏{
背景色：红色；
自对齐：拉伸；/*已添加*/
}
.内容{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
.内容标题{
flex:1；/*对于IE，“flex增长：1”或“flex:1自动”
*/
背景颜色：灰色；
}
.主要内容{
flex:1；/*对于IE，“flex增长：1”或“flex:1自动”
*/
背景颜色：黄色；
}

这是侧边栏
内容头
这是主要内容
如果设置
字体大小：300px在主内容中
.app {
  display: flex;
  flex-direction: row;
  . align-items: flex-start;
  height: 100%;
  width: 100%;
}

.sidebar {
  background-color: red;
  height: 100%;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content-header {
  flex: 1;
  background-color: grey;
}

.content-main {
  flex: 1;
  background-color: yellow;
}

<div class='app'>
  <div class='sidebar'>
    This is sidebar
  </div>
  <div class='content'>
    <div class='content-header'>
      Content Header
    </div>
    <div class='content-main'>
      This is the main content
    </div>
  </div>
</div>

body, html {
  height: 100%;
}