Vertical spacing difference in Chrome v Firefox using flexbox column wrap

Question

I'm trying to create a multicolumn unordered list using flexbox. It's working fine in Chrome but in Firefox the items' spacing for the last column is not correct.

Result in Chrome:

Result in Firefox:

Basically I want to make the list appear in Firefox as it appears in Chrome.(i.e without the above and below spaces).

Below is my html code

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 520px;
  justify-content: center;
  flex-wrap: wrap;
  list-style-type: none;
}

li {
  margin-bottom: 15px;
}

<ul>
  <li>Afganistan Afghanistan</li>
  <li>Albania Albania</li>
  <li>Algeria Algeria</li>
  <li>American Samoa American Samoa</li>
  <li>Andorra Andorra</li>
  <li>Angola Angola</li>
  <li>Anguilla Anguilla</li>
  <li>Antigua & Barbuda Antigua & Barbuda</li>
  <li>Argentina Argentina</li>
  <li>Armenia Armenia</li>
  <li>Aruba Aruba</li>
  <li>Australia Australia</li>
  <li>Austria Austria</li>
  <li>Azerbaijan Azerbaijan</li>
  <li>Bahamas Bahamas</li>
  <li>Bahrain Bahrain</li>
  <li>Bangladesh Bangladesh</li>
  <li>Barbados Barbados</li>
  <li>Belarus Belarus</li>
  <li>Belgium Belgium</li>
  <li>Belize Belize</li>
  <li>Benin Benin</li>
  <li>Bermuda Bermuda</li>
  <li>Bhutan Bhutan</li>
  <li>Bolivia Bolivia</li>
  <li>Bonaire Bonaire</li>
  <li>Bosnia & Herzegovina Bosnia & Herzegovina</li>
  <li>Botswana Botswana</li>
  <li>Brazil Brazil</li>
  <li>British Indian Ocean Ter British Indian Ocean Ter</li>
  <li>Brunei Brunei</li>
  <li>Bulgaria Bulgaria</li>
  <li>Burkina Faso Burkina Faso</li>
  <li>Burundi Burundi</li>
  <li>Cambodia Cambodia</li>
  <li>Cameroon Cameroon</li>
  <li>Canada Canada</li>
  <li>Canary Islands Canary Islands</li>
  <li>Cape Verde Cape Verde</li>
  <li>Cayman Islands Cayman Islands</li>
</ul>

Answer 1

As mentioned in the comments and other answers, the solution to your specific problem is simple: remove justify-content: center.

But this isn't really a good solution.

1. Why isn't Chrome respecting justify-content: center?

2. If you actually wanted the last column vertically centered across browsers, what would you do?

You wrote:

I'm trying to create a multicolumn unordered list using flexbox. It's working fine in Chrome but in Firefox the items' spacing for the last column is not correct.

In reality, the opposite is true: It's working fine in Firefox but not in Chrome.

The source of the problem here is each browser's interpretation of max-height.

Firefox considers the full allowable height (520px) when it applies justify-content, thus creating the extra space for centering to work. In short, Firefox treats max-height as height.

Chrome does not. justify-content: center works if you use height, but doesn't work with max-height. Test it here:

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* max-height: 520px; */
  height: 520px;  /* new */
  justify-content: center;
  list-style-type: none;
}

li {
  margin-bottom: 15px;
}

<ul>
  <li>Afganistan Afghanistan</li>
  <li>Albania Albania</li>
  <li>Algeria Algeria</li>
  <li>American Samoa American Samoa</li>
  <li>Andorra Andorra</li>
  <li>Angola Angola</li>
  <li>Anguilla Anguilla</li>
  <li>Antigua & Barbuda Antigua & Barbuda</li>
  <li>Argentina Argentina</li>
  <li>Armenia Armenia</li>
  <li>Aruba Aruba</li>
  <li>Australia Australia</li>
  <li>Austria Austria</li>
  <li>Azerbaijan Azerbaijan</li>
  <li>Bahamas Bahamas</li>
  <li>Bahrain Bahrain</li>
  <li>Bangladesh Bangladesh</li>
  <li>Barbados Barbados</li>
  <li>Belarus Belarus</li>
  <li>Belgium Belgium</li>
  <li>Belize Belize</li>
  <li>Benin Benin</li>
  <li>Bermuda Bermuda</li>
  <li>Bhutan Bhutan</li>
  <li>Bolivia Bolivia</li>
  <li>Bonaire Bonaire</li>
  <li>Bosnia & Herzegovina Bosnia & Herzegovina</li>
  <li>Botswana Botswana</li>
  <li>Brazil Brazil</li>
  <li>British Indian Ocean Ter British Indian Ocean Ter</li>
  <li>Brunei Brunei</li>
  <li>Bulgaria Bulgaria</li>
  <li>Burkina Faso Burkina Faso</li>
  <li>Burundi Burundi</li>
  <li>Cambodia Cambodia</li>
  <li>Cameroon Cameroon</li>
  <li>Canada Canada</li>
  <li>Canary Islands Canary Islands</li>
  <li>Cape Verde Cape Verde</li>
  <li>Cayman Islands Cayman Islands</li>
</ul>

I researched this behavior for a bit but couldn't find a precise bug report or a simple workaround. This could be a bug in Chrome or, possibly, just another intervention.

An intervention is when a user agent decides to deviate slightly from a standardized behavior in order to provide a greatly enhanced user experience.

Interventions appear to be standard practice at Chrome. Examples here: https://stackoverflow.com/a/52284406/3597276

Also, Edge follows Chrome's behavior.

Answer 2

Remove justify-content: center;