Html 为什么部分不是'；不尊重高度，但尊重父div的宽度？

我有以下html代码：

.generalGrid{
显示：网格；
网格模板柱：0.6fr 1.4fr；
栅柱间隙：1vh；
网格行间距：1vh；
}
.generalGrid>div{
背景色：#ffd8a8；
}
.锦标赛{
高度：24小时；
最大高度：24小时；
网格柱：1；
}
.团队{
高度：50vh；
最大高度：50vh；
网格柱：1；
}
.fss{
高度：24小时；
最大高度：24小时；
网格柱：1；
}
.小队{
高度：100vh；
最大高度：100vh；
网格柱：2；
网格行开始：1；
网格行端：4；
}
.substitutesFlex{
显示器：flex；
背景色：#ffd8a8；
高度：20vh；
最大高度：20vh；
利润上限：1vh；
}
.集装箱{
高度：50vh；
最大高度：50vh；
宽度：50%；
最大宽度：50%；
背景色：#f55555；
}

---

您必须指定容器的溢出规则，以便容器必须隐藏溢出的div或显示滚动条

将

溢出：auto

放入

.container

类中完成此任务

另外，如果您希望容器内容不会溢出。 然后您需要在

%

中给出孩子的高度，而不是在

vh

中，因为

vh

始终表示

窗口或视口的虚拟高度

您需要删除网格项的高度和最大高度，并为
.generalGrid
和
.substitutesFlex
中的
%
而不是
vh
中的
.substitutesFlex
指定高度


.generalGrid{
显示：网格；
网格模板柱：0.6fr 1.4fr；
栅柱间隙：1%；
网格行间距：1%；
身高：80%
}
.generalGrid>div{
背景色：#ffd8a8；
}
.锦标赛{
网格柱：1；
}
.团队{
网格柱：1；
}
.fss{
网格柱：1；
}
.小队{
身高：100%；
网格柱：2；
网格行开始：1；
网格行端：4；
}
.substitutesFlex{
显示器：flex；
背景色：#ffd8a8；
身高：20%；
利润率最高：1%；
}
.集装箱{
高度：50vh；
最大高度：50vh；
宽度：50%；
最大宽度：50%；
背景色：#f55555；
//溢出：自动；
}
您已经在
vh
中设置了一个单元的.container和section height，该单元仅取决于窗口高度，因此它完全按照您的订单执行。这是一个单元和数学的例子。

我写css和html比写英文好-看看剪下来的，有任何问题都可以发表评论


正文{背景：#555；文本对齐：中间}
.盒子{
高度：50vh；
宽度：50%；
背景：蓝色；
}
.电网{
显示：网格；
网格模板柱：0.6fr 1.4fr；
栅柱间隙：1vh；
网格行间距：1vh；
背景：#fff；
}
.一{
高度：12.5vh；
网格柱：1；
背景：红色；
}
.二{
高度：25vh；
网格柱：1；
背景：金；
}
.三{
高度：12.5vh；
网格柱：1；
背景：#0d0；
}
.4{
身高：100%；
网格柱：2；
网格行开始：1；
网格行端：4；
背景：#adf
}
.5{
背景：李子
}
.flex{
显示器：flex；
高度：20vh；
利润上限：1vh；
背景：粉红色；
}

一
二
三到长的内容将打破固定大小
四个网格仍不完全支持
网格并不意味着响应

五
flex并不意味着反应灵敏
另一半怎么办？
vh

单元指的是视口（可以是窗口，也可以是全屏模式下的屏幕），而不是屏幕document@Johannes很抱歉事实上这就是我的意思。窗口不是文档。：）@anees overflow：自动不是我想要的。我需要它能响应，比如，在容器内保持相同的布局。。。我试着用百分比来定义孩子们的身高，但这样做会使布局看起来很奇怪。