Html 使flex项目平均增长（并扩展父容器）

我希望动态地增加一些flex项目和所有其他项目中的内容，使其始终保持最大兄弟项目的大小。我的问题是，我也希望项目，使容器增长，没有固定的尺寸。这里有一个提琴，应该更容易理解：我希望能够按下按钮n次，所有橙色方块在继续增长的同时保持相同的大小

这在flexbox中是可能的吗？如果没有，我怎样才能达到预期的效果

以下是来自JSFIDLE的代码，我需要提供一些：

var维度=180；
函数grow（）{
document.getElementById（“grower”）.style.height=dimension+“px”；
document.getElementById（“grower”）.style.width=dimension+“px”；
尺寸=尺寸+20；
}

.container{
显示器：flex；
最小宽度：200px；
最小高度：200px；
}
.项目{
柔性生长：1；
弹性收缩：1；
弹性基准：0；
背景颜色：橙色；
边框：1px纯灰；
}
#种植者{
宽度：160px；
高度：160px；
背景颜色：黄色；
}

成长！

如果您为元素设置了特定的宽度，那么flex box将不起作用，设置宽度很重要吗？如果只设置高度和as

100%

，则它将起作用。最终，您可以为.item设置

溢出：隐藏

，但我假设内容的剪切将是不好的

如果您为元素设置特定的宽度，那么flex box将无法工作，设置宽度很重要吗？如果只设置高度和as

100%

，则它将起作用。最终，您可以将

溢出：隐藏

设置为.item，但我假设内容的剪切将是不好的

如下：？如下：？我没有设置宽度，子项有宽度。如果我将childs设置为100%，它将只占用项目的可用空间，这不是我想要的。我没有设置宽度，孩子有宽度。如果我将childs设置为100%，它将只占用项目的可用空间，这不是我想要的。