CSS Flex-box - поле Trim, содержащее длинный текст

Я играю с системой flexbox в CSS, и я не могу понять, как решить мою проблему.

Если у меня есть поле с длинным текстом, который разбивается на две строки, окно становится доступным до полной ширины, и я не хочу этого. Если текст находится на многих строках, я хочу, чтобы ящик увеличивался до самой длинной строки. Ну, мой английский не очень хорош, поэтому у меня есть изображения, чтобы лучше показать, чего я хочу достичь.

Это то, что у меня есть сейчас:

И это то, что я хочу иметь:

Я искал готовое решение в google (и stackoverflow), но без везения. Я также подготовил JSFiddle для этого: http://jsfiddle.net/f98VN/4/

Можно ли делать то, что я хочу, и если да, то как я могу это достичь? Если нет, каковы ваши предложения?

код:

HTML

<div>
 
 <div>text is here</div>
 
</div>

CSS

.flex-parent {
 display: flex;
 justify-content: center;
 width: 550px; /* it has width of the whole page, in fiddle I changed it to fixed */
 align-items: center;
}
.item1 {
 background: red;
 height: 100px; /* it has constant width */
 width: 100px;
}
.item2 { /* it width is fluid, depends on text inside which is modified by JS */
 background: pink;
 font-size: 100px;
}