Why does CSS Flexbox not properly size the right-most container?

Question

After having had troubles trying to display three containers in a row with the middle one being centered on the page and the side ones being of a fixed width I came across the CSS Flexbox model, mentioned in a Stackoverflow question.

Using display: flex instead of float: left or displaying the containers as inline-box whilst messing with margin seems to be working quite well, with way fewer lines of code.

However, I ran into an issue with flexbox that I can't seem to solve on my own:

I want a container #menubar to hold three containers in a row: #logo, nav and #search.

<div id="menubar">
    <div id="logo"></div>
    <nav>
        <ul>
            <li><a href="#">Articles</a></li>
            <li><a href="#">Images</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Disclaimer</a></li>
        </ul>
    </nav>
    <div id="search"></div>
</div>

The #logo-container as well as the #search-container are of a fixed size (width: 80px, height: 80px). One should be placed at the very left side of the #menubar-container and one should be placed at the very right.

The nav-container should be centered within the middle of the #menubar-container. Basically the positioning is working and I get the desired layout:

[#logo left]    [nav centered]    [#search right]

However, for some reason the #logo-container is being displayed at the specified dimension of 80px width * 80px height while the #search-container is being displayed at 79px width * 80px height, even through the CSS looks like:

header div#menubar div#logo {
    width: 80px;
    height: 80px;
    background-color: orange;
}

header div#menubar div#search {
    width: 80px;
    height: 80px;
    background-color: orange;
}

To confirm I made a screenshot and zoomed in with Photoshop, selecting the container to view its dimensions.

I can't figure out why the #search-container is missing one pixel in width.

Here is a JSFiddle with the HTML and CSS I am using.

• Am I using flexbox correctly?
• How do I fix it so both side-containers are 80x80 pixel in dimensions?

Answer 1

Am I using flexbox correctly?

Yes and no

Instead of width you should, ideally, be using the flexshorthand property combining, flex-grow, flex-shrink and flex-basis.

header div#menubar div#logo {
    flex: 0 0 80px;
    height: 80px;
    background-color: orange;
}

Alternatively, you can ensure that the element doesn't shrink by using width AND the flex-shrink value of 0

* {
  margin: 0;
  padding: 0
}
body {
  background-color: #dfe3e5;
}
header div#top {
  height: 22px;
  /*background-image: url('../img/colorbar.png');
    background-position: top left;
    background-repeat: repeat-x;*/
  background-color: gray;
}
header div#menubar {
  background-color: #1c2227;
  display: flex;
  justify-content: space-between;
}
header div#menubar div#logo {
  flex: 0 0 80px;
  height: 80px;
  background-color: orange;
}
header div#menubar nav {
  display: table;
  text-align: center;
  background-color: darkred;
}
header div#menubar nav ul li {
  display: inline-block;
  margin-left: -4px;
  list-style-type: none;
  line-height: 80px;
  text-align: center;
}
header div#menubar nav ul li a {
  outline: 0;
  display: block;
  text-transform: uppercase;
  padding: 0px 20px;
  font-size: 1.1em;
  font-family: 'Raleway', "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #eee;
  text-decoration: none;
}
header div#menubar nav ul li a:hover {
  color: #000;
  background-color: orange;
}
header div#menubar div#search {
  flex: 0 0 80%;
  height: 80px;
  background-color: orange;
}

<header>
  <div id="menubar">
    <div id="logo"></div>
    <nav>
      <ul>
        <li><a href="#">Articles</a>
        </li>
        <li><a href="#">Images</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Disclaimer</a>
        </li>
      </ul>
    </nav>
    <div id="search"></div>
  </div>
</header>

Then you get the right result