Why does my flex item ignore flex-shrink: 1 and overflow its container when it contains a long string?

html

<div class="container">
<div class="item">Large content.</div>
</div>
css
.container {
display: flex;
width: 200px;
}
.item {
flex: 1; /* Should shrink, right? */
background: lightblue;
}
Problem: The .item box keeps expanding, making the container larger than 200px. I expected it to wrap. Why is this happening?