Почему мой гибкий элемент игнорирует flex-shrink: 1 и переполняет свой контейнер, когда он содержит длинную строку? ⇐ CSS

[Anonymous]

Код: Выделить всё

.container {
display: flex;
width: 200px;
}
.item {
flex: 1; /* Should shrink, right? */
background: lightblue;
}

Код: Выделить всё

Large content. Large content. Large content. Large content. Large content. Large content. Large content.

Проблема: поле .item продолжает расширяться, в результате чего размер контейнера превышает 200 пикселей. Я ожидал, что это завершится. Почему это происходит?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -when-it-c