Flex columns only center when wrapped

Question

I'm displaying list items in columns by using flexbox. Items should wrap into more columns after a specific height, columns should be centered horizontally, and list items within each column should be left justified. I'm using max-height to limit list height, flex-flow: column wrap to build wrapping columns, and align-content: center to center the columns.

I realize a multi-column solution might be more obvious, but I don't want to define column-width or column-count, so I opted for a flexbox solution.

The Problem
Columns are only centered horizontally when items wrap to multiple columns. If there is only one column, then the column is not centered. I see this behavior in Chrome 63 on both Windows 10 Home and MacOS Sierra. In Firefox, it looks the way I intended (screenshots below).

Am I missing something?
How can I get the column(s) to always be horizontally centered, cross-browser?

.filter_drop {
  display: flex;
  flex-flow: column wrap;
  align-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 7em;
  border-bottom: 1px solid black;
}

.filter_drop li {
  margin: 0 1em 0 0;
  line-height: 1.2;
}

<ul class="filter_drop">
  <li>One</li>
  <li>Two </li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight </li>
  <li>Nine</li>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
</ul>
<ul class="filter_drop">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
</ul>
<ul class="filter_drop">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
<ul class="filter_drop">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

View on JSFiddle

---

Chrome 63:

Firefox 57:

Answer 1

align-content works only when there are multiple lines in the flex container.

align-items or align-self is needed to align a single line.

Here's a complete explanation:

• How does flex-wrap work with align-self, align-items and align-content?

.filter_drop {
  display: flex;
  flex-flow: column wrap;
  align-content: center;
  align-items: center; /* NEW */
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 7em;
  border-bottom: 1px solid black;
}

.filter_drop li {
  margin: 0 1em 0 0;
  line-height: 1.2;
}

<ul class="filter_drop">
  <li>One</li>
  <li>Two </li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight </li>
  <li>Nine</li>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
</ul>
<ul class="filter_drop">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
</ul>
<ul class="filter_drop">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
<ul class="filter_drop">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>