Flex item with text stretching beyond its content's width when there is a soft line wrap

Question

Let's suppose we have a flex container with one item that contains a string having a hyphen/whitespace, which allows for a soft line wrap.

.container {
  display: flex;
  margin: 1em;
  border: red 1px solid;
}

.item {
  margin: 1em;
  border: black 1px solid;
}

<div class="container">
  <div class="item">
    LoremIpsum-DolorSitAmetConsecteturAdipisicingElit
  </div>
</div>

When there is no need for a wrap at all the item's width would be equal to that of the string:

However, in the course of shrinking of the available space the wrap appears:

The problem is the item's width is not limited to the visisble borders of the string but goes beyond it, stretching together with the container.

Why does it happen despite the fact that flex-basis should fit the item's content here? How can I force the item's width to be as much as its content, and no more?

The only option I know is width: min-contnet; However, it causes a word with a hyphen or whitespace to be wrapped in any case regardless of an actual need for wrapping.