CSS Flex-box - Trim field containing long text

Question

I play with the flexbox system in CSS and I cannot figure out how to solve my problem.

If I have a field with long text that is split into two lines, the window becomes available to the full width, and I do not want this. If the text is on many lines, I want the box to grow to the longest line. Well, my English is not very good, so I have images to better show what I want to achieve.

This is what I have now:

And this is what I want to have:

I was looking for a complete solution in google (and stackoverflow), but with no luck. I also prepared a JSFiddle for this: http://jsfiddle.net/f98VN/4/

Is it possible to do what I want, and if so, how can I achieve this? If not, what are your suggestions?

the code:

HTML

<div class="flex-parent"> <div class="item1"></div> <div class="item2">text is here</div> <div class="item1"></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; } 

Answer 1

You can compress the middle container to the longest word using: display:table;width:1%; DEMO or use inline-block and inline-table , discarding flexmodel: DEMO (this is it)

To keep words together, you can use the non-infringing character   between the words that you want to leave aside on the same line: DEMO

Edit: Over demos works in some browsers. In Chrome and Opera, content moves toward the page. Fixed Version: http://codepen.io/gc-nomade/pen/izKFG

Answer 2

Well, extra space appears because a gap in space is a fake effect applied by the browser. What actually happens and is hidden by the browser is that the word breaks between its letters, then the extra space is actually the space that the letters really occupy.

You can see this by setting the div text to word-break: break-all; http://jsfiddle.net/f98VN/10/

This is not the effect you requested, but at least it does not leave too much space.

Answer 3

I got it the way you want, using percentages, not fixed pixel widths,

 changed width: 550px; to width:70%; 

check out this updated fiddle