Html 如何使用flexbox使图元占据剩余的可用高度？

我在flexbox上的页面布局有问题，不知道是否有人能帮忙！我在JSFIDLE中获得了以下代码

我正试图让ID为“notheader”的div延伸到屏幕底部，但我没有运气。据我所知，如果我在“notheader”div中使用

align content:stretch

，应该可以工作，但我什么也得不到

我也尝试过将高度改为100%，但同样没有效果

正文{
背景色：蓝紫色；
边际：0px；
填充：0px；
显示器：flex；
对齐内容：拉伸；
身高：100%；
}
html{
身高：100%；
}
导航{
背景色：浅绿色；
宽度：80px；
身高：100%；
}
主要{
背景：黄色；
宽度：100%
}
标题{
高度：100px；
背景色：青色；
}
#控制{
背景：番茄；
}
#诺纳夫{
宽度：100%；
背景色：黄绿色；
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
#其他领导人{
背景：白色；
}

导航条

标题
非标题

将

flex:1

添加到

#otherheader

供参考，我在IE中使用

flex:1

时遇到了问题。IE似乎认为这应该评估为

flex:1 10

，但Chrome认为它应该是

flex:1 auto

。大多数时候我需要flex:1 auto，所以我觉得有必要把速记的三个部分都写出来。@JosephMarikle这是Chrome不遵守规范的错误，这是一个bug。随着时间的推移，你会在Chrome中发现许多这样的错误。@JosephMarikle

flex basis

默认情况下是

auto

，跨浏览器时，缩写

flex

不会呈现相同的值。。。规范say

flex:

应呈现为

flex:10

，这在IE中不起同样的作用。IE需要一个用于

flex-basis

的单元。因此，当您说它应该是

flex:1 auto

时，您是不正确的，如果您需要它是

auto

，那么在使用

flex

时，您需要设置所有3个值，或者使用它们的直接属性。例如，

flex-grow:1

只需更改flex-grow属性即可使其成为

1自动

。@TylerH是IE在速记

flex

方面存在问题，而不是Chrome。它需要一个单位来表示

flex-basis

值，因此在使用

flex:1

时，它不会在所有情况下都像应该的那样发挥作用

flex:1

将值设置为

10

，IE不作为

0

的行为单位。