Prevent flex item from growing bigger than siblings

Question

How do I prevent a flex item from getting bigger than its siblings.

CodeSandbox: LINK

Example:

<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 would result in something that looks like this:

As you can see, the last item expands to fit the empty space. I don't want this behavior. I would prefer if it would match the width of its siblings above it. Is there some way to do this while keeping the growth behavior of the top row?

EDIT: I want items wrap if there isn't enough space to fit them.

Answer 1

instead of flex-wrap:wrap add flex-wrap:nowrap This will do the work.