Html DIV包含不同数量的DIV，填充并覆盖剩余空间

我有一个箱子。我需要用其他div填充此容器，但项目的数量正在更改。它可能是3或4，甚至是别的什么

高度无关紧要，宽度对所有人来说都是一样的

---

我使用了display:block和float:left-它可以工作，但还有剩余的空间。我想强制这些项目覆盖剩余空间。

Flexbox将允许您按需要自动调整元素大小

Flexbox需要两件事：

父容器，例如DIV、section、aside、p等

一个或多个子元素，例如div、p、img等

演示： $'adddiv'。单击函数{ $'container'。追加； }; $'remdiv'。单击函数{ $'container>div:last'。删除； }; 容器{display:flex；} 容器>div{flex:1；宽度：50px；高度：50px；} 容器div:nth-child1{背景：绿色；} 容器div:nth-child2{背景：粉红色；} container div:nth-child3{背景：浅蓝色；} 容器div:nth-child4{背景：红色；} 容器div:nth-child5{背景：淡绿色；} 容器div:nth-child6{背景：黄色；} 容器div:nth-child7{背景：橙色；} 容器div:nth-child8{背景：紫色；} 集装箱部门：N-child9{背景：米色；} 添加Div

---

删除一个div你可以发布你的代码吗？对于父对象显示：flex，对于子对象显示：flex-grow:1如何？还是你想把剩下的高度也填满？非常感谢。太好了，这正是我想要的，身高也一样吗？嗨，只是跟进一下。你的问题回答得满意吗？如果我们还可以提供更多帮助，请在其中一个答案下方添加评论，或者编辑您的问题，以澄清您还需要哪些帮助。否则，如果您可以通过单击答案旁边的复选标记来结束问题，从而选择最佳答案，那就太好了。嗨，Ehsan，我们可以麻烦您选择一个最佳答案，或者提供您自己的答案并选择该答案来结束问题吗？那会帮助我们的。非常感谢