When a flexbox item has wrapping text the item fills the container and has extra whitespace at the end

Question

Using a flexbox layout, I have a container with three divs in it. What I'm going for is the first div hugging the left edge of the container while the remaining two divs snuggle up on the right edge of the container. I'm admittedly very new to using the flex layout, but it seems straightforward enough.

Simple html:

<div class="container">
  <div class="one">Left</div>
  <div class="two">Middle</div>
  <div class="three">Right</div>
</div>

And associated css:

.container{
  display: flex;
  align-items: center;
}

.one{
  margin-right:auto;  
}

The above code usually displays exactly as intended, and for most cases is perfect. Where trouble rears up is when, for example, that third item has enough text to wrap. When this happens the third item fills with whitespace to the right of the text, leaving no space between items one and two. It is subtle with small words, but pretty obvious with two large words that break right in the middle. The following codepen explains it better than I can.

Codepen showing the issue: http://codepen.io/camwheel/pen/XjjyOx

Am I abusing/misusing flex syntax here, or is there a legitimate issue with wrapped text in a flex item? More importantly in the short term, is there anything I can do to get around this issue?

Maybe set the flex items to content sizing (i.e., `flex: 0 0 auto`): http://codepen.io/anon/pen/qaaLkW — Michael Benjamin, Sep 19 '16 at 23:29
@Michael_B: I considered this, but it makes the text flow outside of the defined area. In a fixed width section this means pushing into other areas, and for a fullscreen page it means side scrolling, which won't fly. — zero, Sep 19 '16 at 23:36
The problem is that in CSS a parent doesn't know when a child wraps, so it doesn't shrink-wrap the narrower content. It just continues on as if the child was still there (hence the reserved space on the right). More details [**here**](http://stackoverflow.com/a/37413580/3597276). JS can help. — Michael Benjamin, Sep 19 '16 at 23:49
That makes perfect sense, thank you for the explanation. What once was infuriating is now just disappointing since I understand it. I'll leave it open for a few days anyway to see if any brilliant ideas pop up. — zero, Sep 19 '16 at 23:59

score 1 · Accepted Answer · edited May 23 '17 at 12:00

1

As Michael_B pointed out in comments, this isn't a flex issue. It comes down to a limitation of CSS. Parent items don't know when child items shrink (which happens to the width when text wraps) and so can't collapse back down. For a more in depth assessment see his earlier post here.

edited May 23 '17 at 12:00

Community

1
1

answered Sep 22 '16 at 16:08

zero

138
4

score 0 · Answer 2 · answered Sep 19 '16 at 23:38

If your divs only contain text then you can do the following:

Skip flexing the last item
text-align: right on the middle element

.container {
  display: flex;
  background: salmon;
}

.one, .two {
  flex: 1;
}

.two {
  text-align: right;  
}

<div class="container">
  <div class="one">Left</div>
  <div class="two">Middle</div>
  <div class="three">Right</div>
</div>

When a flexbox item has wrapping text the item fills the container and has extra whitespace at the end

2 Answers2