Extra space added to last justified inline-block element in Chrome

Question

I've come across a slight issue that appears to only occur in Chrome (tested and OK in IE10 and FF 31).

In the example provided there is #message and #link, both are set to display: inline-block; so that they can be vertically aligned to the middle of each other (the text in #message could vary in length greatly).

text-align: justify; has been set on #container to ensure that #message is aligned to the left and #link to the right.

The issue is that at certain window sizes a small "space" will appear to the right of #link.

The problem:

What it should look like:

What I am actually trying to achieve:

If you view the fiddle and can't see the problem try re-sizing the window.

1. What is causing this issue in Chrome?
2. Is there any way to fix this without resorting to using floats (I would like to keep vertical alignment)?

JS Fiddle:

http://jsfiddle.net/vvubdqkk/

HTML:

<div id="container">
    <div id="message">Lorem 1. Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum gravida tincidunt.</div> 
    <a id="link" href="#">OK</a>
    <div id="info">Lorem 2. Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum gravida tincidunt.</div>
</div>

CSS:

#container {
    background-color: red;
    bottom: 0;
    left: 0;
    margin: 10px 5%;
    position: fixed;
    text-align: justify;
    width: 90%;
}
#message {
    color: #FFFFFF;
    display: inline-block;
    max-width: 80%;
    vertical-align: middle;
}
#link {
    background-color: #FFFFFF;
    color: #000000;
    display: inline-block;
    padding: 1em;
}
#info {
    background-color: green;
    color: #FFFFFF;
    display: inline-block;
    margin: 0;
    width: 100%;
}

Answer 1

This case is a perfect candidate for using the flexbox layout. You can keep your existing code as is but add the following lines. This will keep your original code as a fallback for browsers which don't support flexbox. Since Chrome does support the current flexbox syntax all the way back to version 21, this should safely eliminate your problem.

Codepen Demo

Modified CSS

#container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

#message {
  flex: 1;
}

You'll need to vendor prefix the code for comprehensive browser support, but since you're only worried about the bug in Chrome this is not strictly necessary (unprefixed support goes back to version 29, although version 27 still holds .54% of global market share, so you might throw -webkit- in to be on the safe side).

Since flexbox can be a little confusing to use at first, if you haven't used it before there is a good overview with examples at CSS-Tricks. I don't have enough reputation points to post more than two links but just Google "css tricks flexbox".

Hope this helps.

Answer 2

The overall issue is you are styling #container similar to how you should instead be styling #message. #Container should simply be an imaginary holder/container of #message, #link, #info.

Try getting rid of the #container background color red and instead add it to #message. After doing that you'll encounter a few padding issues with your link (I deleted the padding:1em). Next, you can adjust the width % of #message to get the spacing right. You'll notice that I deleted width:90% on your #container.

#container {
   bottom: 0;
   left: 0;
   margin: 10px 5%;
   position: fixed;
   text-align: justify;
}
#message {
    background-color: red;
    color: #FFFFFF;
    display: inline-block;
    max-width: 90%;
    vertical-align: middle;
}
#link {
    background-color: #FFFFFF;
    color: #000000;
    display: inline-block;
}
#info {
    background-color: green;
    color: #FFFFFF;
    display: inline-block;
    margin: 0;
    width: 100%;
}