Is there a way to prevent a flex item from growing bigger than its siblings?
Check out the example on CodeSandbox: LINK
Here is the sample code:
<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>
This setup will look like this: https://i.sstatic.net/h45Gy.jpg
In the illustration, you can see that the last item expands to fill the empty space. However, I would like it to match the width of its sibling elements above it. Is there a way to achieve this without affecting the growth behavior of the top row?
UPDATE: I also want the items to wrap if there is insufficient space for them.