Html 在父div中发生溢出时隐藏整个子div

我在一个固定的父div中有5个子div，其高度随设备而异。我正在寻找任何黑客隐藏整个div，如果它不能适应固定的父div

我尝试过“溢出：隐藏”，但它只会裁剪溢出的部分，而不是整个div

.fixed div{
背景：绿黄色；
高度：计算（100vh-10px）；
宽度：100px；
位置：固定；
溢出：隐藏；
}
.儿童组{
宽度：60px；
高度：60px；
背景：红色；
保证金：20px自动；
}

---

使用flexbox和colmun方向，然后启用包裹。当没有足够的空间容纳元素时，元素将自动移动到新列。由于您还固定了宽度，因此新列也将被隐藏

.fixed div{
背景：绿黄色；
高度：计算（100vh-10px）；
宽度：100px；
位置：固定；
溢出：隐藏；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
}
.儿童组{
宽度：60px；
高度：60px；
背景：红色；
利润率：10px 20px；
}
.儿童组：第一名儿童{
边缘顶部：20px；
}

---

这可以通过CSS网格来实现，方法是定义最大宽度和动态行数，以及定义溢出：隐藏来隐藏没有空间的项目。看看这个：

.fixed div{
显示：网格；
网格模板行：重复（自动拟合，最小值（100px，1fr））；
网格模板列：100px；
网格自动流：列；
背景：绿黄色；
最大高度：计算（100vh-10px）；
最大宽度：100px；
溢出：隐藏；
}
.儿童组{
宽度：60px；
高度：60px；
背景：红色；
保证金：20px自动；
}

---

谢谢，flex解决方案与引导完美结合。（Y）