CSS: make row-oriented divs in flexbox as small as possible when text goes on next line

Question

I have the following code:

.container {
  display: flex;
  border: 3px solid black;
}

.item {
  font-size: 30px;
  margin: 10px;
  background-color: #add8e6;
}

<div class="container">
  <div class="item">
    Someloooong looooooongtext
  </div>
  <div class="item">
    Some more text
  </div>
  <div class="item">
    Short
  </div>
  <div class="item">
    Another bit of text
  </div>
</div>

See https://jsfiddle.net/p3srgwtx/

If the HTML output window is large enough, the divs look like this:

If I make the HTML output window smaller, the divs containing multiple words put part of their content and the next line, which looks like this:

However, I would like them to behave more like this:

Is this possible, for example with flexbox?