防止弹性项目变得比兄弟姐妹大

Question

如何防止弹性项目变得比其兄弟姐妹大。

CodeSandbox：LINK

示例：

<div class='wrapper'>
    <div class='box one'></div>
    <div class='box two'></div>
    <div class='box three'></div>
    <div class='box four'></div>
</div>

<style>
   .wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  flex: 1 200px;
  max-height: 50px;
}

.one {
  background-color: green;
}

.two {
  background-color: blueviolet;
}

.three {
  background-color: tomato;
}

.four {
  background-color: slateblue;
}

</style>

这将导致如下所示：

如您所见，最后一项扩展为适合空白区域。我不要这种行为。我希望它与它上面的兄弟姐妹的宽度匹配。有什么方法可以做到这一点，同时又保持第一行的增长行为？

编辑：如果没有足够的空间容纳它们，我希望包裹它们。

Answer 1

代替TypeError: unsupported operand type(s) for /: 'str' and 'int' 添加flex-wrap:wrap，这将完成工作。