Wrap when equal-width containers get too small to contain their content

I have a row flexbox with these requirements:

1. The flexbox has two child flex items
2. The flex items ALWAYS have the same width
3. As soon as the container becomes small enough that ANY of the flex items cannot fit their content, cause the flexbox to wrap.

<div class="container"><div class="item">LOOOOOOOOOOONG</div><div class="item">SHORT</div></div>

* {  margin: 0;  padding: 0;  box-sizing: border-box;}.container {  background: lightcyan;  width: 90%;  margin: 20px auto;  display: flex;  flex-flow: row wrap;  gap: 20px;  padding: 20px;}.item {  background: salmon;  padding: 10px;  flex: 1 0 0;  overflow: hidden;}

As you can see screenshot, the flexbox never wraps.