我不想把文章写的太长，单篇仅仅说明height: 100%;
我常常会遇到一个问题，当父级没有明确的height值的时候，子级height: 100%;是没有用的。
包括父级flex-grow: 1;这种情况，父级高度明明已经撑开了，但是子级height: 100%;仍然获取不到父级高度。 此时子级height: 100%;就是类似fit-content的效果。
当需要使用flex-grow: 1;还想body元素min-height: 100vh;还不想写的时候height: 100vh;menu元素写flex就很好用，子级就会默认父级高度，
但是此时子级就不要加上height: 100%;不然高度同上又被设置成了fit-content的效果。
其实红色区域要先占满绿色区域全部高度，绿色flex column，红色再次flex-grow:1也是可以的。
但是红色区域有可能需要横排的兄弟元素,有的需要高度100%，有的需要固定高度垂直居中。那样就只能采用上面的flex方法了。
或者采用grid布局方案，下几篇文章会解说。
