CSS: Flexbox with space between doesn't work correctly (anymore)

Question

I have a row (container) that contains three items, which I want to show horizontally with equal space between (and no space to the left or right of the row). I'm using flexbox with justify-content:space-between.

This is in Firefox (recent version) and Internet Explorer; other browsers I've not tested.

This used to work fine, until I did some (as far as I see) totally unrelated re-factoring, with no changes to CSS. Then suddenly the three items didn't cover the whole of the containing row anymore. Instead there was a space to the right of the row (i.e. to the right of the right most item in the row).

Also see the following screen print. Just below the banner, you see the three items (squares, with are actually list elements, with the container row being an unordered list). And you see that there is the space on the right side. What I want is simply that the row of items displays with the same full width as the banner, which is 1280px, as you can see in the Firefox inspector tool. You also see the relevant HTML in the screen print:

And another screen print, where you see that the width of the container row is also 1280px (as it should be - same width as the banner), and all the relevant HTML as well as CSS:

And for completeness' sake, here is a copy/paste of the CSS for both the row (the flex container, i.e. the unordered list) and for the items themselves:

.flex-container {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  wrap: nowrap; // Nothing changes if I remove this property, it's in fact the default
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}

.flex-item {
  background: #452F5D;
  width: 410px;
  margin: 0px;
  padding: 0px;
  height: 100%;
  color: white;
  font-weight: bold;
  font-size: 3em;
}    

Edit: as you see in the above screen prints, the items are also members of a CSS class called 'rechthoek'. But this class actually doesn't hold any CSS properties at this time, so it can be ignored.

Edit later on: Well guess what... I suddenly realised it may be a good idea to clear my browser cache... and yes, then it suddenly worked fine again (even without the flex-grow). So that's rather silly of me.

But on the other hand, it does raise a more fundamental question: How is it possible that the Firefox inspection tool showed the correct (i.e. current) HTML and CSS, and still Firefox rendered it wrongly (i.e. according to an earlier version)? Well, at least if we assume that the HTML and CSS shown in the tool, and on my screen prints above, was indeed correct (which I will try to check once more).

If so, then we have the strange case that the Firefox Inspector tool showed the correct CSS and HTML, but Firefox still rendered the page wrongly... In other words, a discrepancy between the CSS shown by the Inspection tool and the CSS actually used by Firefox.

Thanks.

Answer 1

If your flex container is for the three elements that are not aligned, you need another solution, maybe more elegant

Just some deleting here :

.flex-container {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

And hare it could be something like this:

.flex-item {
  flex-grow:1;
  background: #452F5D;
  margin: 0px;
  padding: 0px;
  height: 100%;
  color: white;
  font-weight: bold;
  font-size: 3em;
} 

According to flex-grow defintion of 1 :

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.

Update :

this solution maybe could work:

add width:410px in your flex-item class, and also

add middle css class:

middle{
  margin-left:10px !important;/**or your value*/
  margin-right:10px !important;
}

and your html something like:

<div class="flex-container">
<div class="flex-item">lol</div>
<div class="flex-item middle">lol</div>
<div class="flex-item">lol</div>
</div>