使弹性项目平均增长（并扩展父容器）

Question

我想动态地增加一些弹性项目和所有其他项目中的内容，使其始终保持最大兄弟的大小。我的问题是我也希望这些物品可以使没有固定尺寸的容器变大。这是一个小提琴，应该更容易理解：https://jsfiddle.net/uxjs5eL6/3/我希望能够按下按钮 n 次，并且所有橙色方块保持相同大小，同时仍在增长。

这甚至可以通过 flexbox 实现吗？如果没有，我怎样才能达到预期的效果？

这是来自 JSFiddle 的代码，因为我需要提供一些：

var dimension = 180;

function grow() {
  document.getElementById("grower").style.height = dimension + "px";
  document.getElementById("grower").style.width = dimension + "px";
  dimension = dimension + 20;
}

.container {
  display: flex;
  min-width: 200px;
  min-height: 200px;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  background-color: orange;
  border: 1px solid grey;
}

#grower {
  width: 160px;
  height: 160px;
  background-color: yellow;
}

<button onclick="grow()">
Grow!
</button>

<div class="container">
  <div class="item">
    <div id="grower">
    
    </div>
  </div>
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
</div>

Answer 1

如果你给元素设置了特定的宽度，那么 flex-box 将不起作用，设置宽度很重要吗？如果您只设置高度并使用100%，那么它将起作用。最终您可以将overflow: hidden 设置为.item，但我认为剪切内容会很糟糕