Html 嵌套flexbox和CSS网格布局中的空间分布问题

据我所知，我的

元素和
div.content
应该占据
div.container
中可用空间的一半。此外，
div.content
中的网格应占据所有可用的垂直空间

问题是网格项不能具有任何高度（如果没有硬编码）。此外，网格占用的所有垂直空间（由于
网格间隙
）都来自
旁边的
元素和
div.content
，这意味着
div.content
窃取了
旁边的
垂直空间，这两个元素的高度不再相同

aside
的高度等于
div.content
的高度减去网格的高度

总之，禁止使用flexbox为
div.content
设置的高度。添加到
div.content
的子元素的行为更像它的同级元素


*{
框大小：边框框；
}
身体{
最小高度：100%；
保证金：0；
显示器：flex；
弯曲方向：立柱；
}
html{
身高：100%；
}
标题，
页脚{
背景色：#1A1C22；
高度：100px；
}
.集装箱{
flex:10400px；
显示器：flex；
弯曲方向：立柱；
填充顶部：12px；
}
旁白{
背景色：#6C757D；
flex:1自动；
}
.内容{
flex:1自动；
显示：网格；
网格模板列：1fr；
网格模板行：重复（6，1fr）；
栅隙：20px；
边框：2件纯蓝；
}
部分{
背景色：#343A40；
边框：1px纯红；
}
通过明确指定
高度而不是
flex-basis
并将
flex:1 0 auto
设置为
.container
，您可以让它在Chrome和Firefox中正常工作。对于
内容
和
旁白
（设置
弹性基准：0
而不是自动），也使用
flex:1
代替
flex:1自动
）-参见下面的演示和一个：


*{
框大小：边框框；
}
身体{
最小高度：100%；
保证金：0；
显示器：flex；
弯曲方向：立柱；
}
html{
身高：100%；
}
标题，
页脚{
背景色：#1A1C22；
高度：100px；
}
.集装箱{
/*flex:10400px*/
显示器：flex；
弯曲方向：立柱；
填充顶部：12px；
高度：400px；/*已添加*/
flex:10自动；/*已添加*/
}
旁白{
背景色：#6C757D；
弹性：1；/*已更改*/
}
.内容{
弹性：1；/*已更改*/
显示：网格；
网格模板列：1fr；
网格模板行：重复（6，1fr）；
栅隙：20px；
边框：2件纯蓝；
}
部分{
背景色：#343A40；
边框：1px纯红；
}
通过明确指定
高度而不是
flex-basis
并将
flex:1 0 auto
设置为
.container
，您可以让它在Chrome和Firefox中正常工作。对于
内容
和
旁白
（设置
弹性基准：0
而不是自动），也使用
flex:1
代替
flex:1自动
）-参见下面的演示和一个：


*{
框大小：边框框；
}
身体{
最小高度：100%；
保证金：0；
显示器：flex；
弯曲方向：立柱；
}
html{
身高：100%；
}
标题，
页脚{
背景色：#1A1C22；
高度：100px；
}
.集装箱{
/*flex:10400px*/
显示器：flex；
弯曲方向：立柱；
填充顶部：12px；
高度：400px；/*已添加*/
flex:10自动；/*已添加*/
}
旁白{
背景色：#6C757D；
弹性：1；/*已更改*/
}
.内容{
弹性：1；/*已更改*/
显示：网格；
网格模板列：1fr；
网格模板行：重复（6，1fr）；
栅隙：20px；
边框：2件纯蓝；
}
部分{
背景色：#343A40；
边框：1px纯红；
}

你应该考虑<代码> Flex：1 1×0% <代码>（Flex基：0%）和Min Health: 0，但仍然是相同的问题。上面看来对Firefox很有效，但不是ChlMyu应该考虑<代码> Flex：1 1 0% （Flex基：0%）对于内容，最小高度为0，但仍然是同一个问题^Chrome@biggerleb如果答案对你有帮助，也请投票，谢谢：）@biggerleb如果答案对你有帮助，也请投票，谢谢：）