Flexbox filling div with blank space when text split over two lines

Question

I have a flex container div with 2 elements - a title, and a "like" svg image that is vertically centered and is displayed just to the right of the title.

When the title is too long to be displayed on one line, it seems to fill the title div with extra space on the right, so the image will not display immediately to the right of the split text.

Here is what the HTML looks like:

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

.like-div {
 font-size: 10px;
 margin-left: 20px;
 order: 1;
}

.title {
 font-size: 40px;
}

    <div class="like-container">
      <div class="like-div">
        <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
    viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve">
      <metadata>
       <sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">
        <slices/>
        <sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/>
       </sfw>
      </metadata>
      <path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653  c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/>
      <path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194  c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758  c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504  c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481  c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809  C268.403,168.538,290.992,168.011,278.918,147.336z"/>
     </svg>
        <span>Like</span>
      </div>
      <div class="title">
        This is the very longish Title!
      </div>
    </div>

I have created a plnkr so that you can see what I mean: http://plnkr.co/edit/cPMp4sjIUTbX3ohMW4aI

Any ideas?

Looks like normal text wrapping to me. Nothing you can do about that...not even in flexbox. — Paulie_D, Oct 24 '15 at 20:06

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

What you are seeking is often referred to as shrink-to-fit or shrink-wrapping, where a container neatly wraps its content without leaving extra space.

CSS3 does offer a new keyword for width and height called min-content, which makes the box wrap closely to the content, but browser support is still very weak.

Here's one alternative you may want to consider: Use the ::after pseudo-element.

Remove the "like" image from the HTML (at least for this demo) and add this to your CSS:

.title::after {
    display: inline-block;
    content: "";
    height: 40px;
    width: 40px;
    background: url('http://i.imgur.com/99oDJSA.png') no-repeat;
    vertical-align: baseline;
}

DEMO: http://jsfiddle.net/hjkh3dy1/

Flexbox filling div with blank space when text split over two lines

1 Answers1