I have a flexbox with three flex items with text in it.
I want to go from all three items in a row to a column directly when the items wants to start wrapping.
I don’t have to have a media query for this, it should only happen if no available space left.

So from three in a row to all in a column. Not wrapping so we have two in a row and one below that.

I have tried a lot of different things but have not yet gotten it to work.

<div class="container">
 <div class="item">Lorem ipsum dolor</div>
 <div class="item">cCnsectetur adipiscing</div>
 <div class="item">Quis nostrud</div>
</Container>

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%
}

.item {
  flex: 1;
  height: 3rem;
  min-height: 3rem;
  background: lightgray;
}