Flex items go from row to column when no available space horizontally without mediaquery

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.

.container {  display: flex;  flex-flow: row wrap;  width: 100%}.item {  flex: 1;  height: 3rem;  min-height: 3rem;  background: lightgray;}

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