`align-items: center; align-content: flex-start; flex-wrap: wrap;` centers 1-line child elements vertically in Chrome, but not in Firefox nor Edge

[duanyao]

Test case: http://jsbin.com/lefozusodi/1/edit?html,css,js,output Code:

<style>
.container {
  width: 400px;
  height: 200px;
  background-color: yellow;

  display: flex;

  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
}

.child {
  width: 150px;
  height: 100px;
  background-color: blue;
}
</style>
<div class="container">
  <div class="child"></div>
</div>

Screenshot of Chrome 54:

Screenshot of Firefox 52 or Edge 14:

So align-items: center; align-content: flex-start; flex-wrap: wrap; centers 1-line child elements vertically in Chrome, but not in Firefox nor Edge.

I have no idea which behavior is correct according to the spec, but I appreciate Chrome's, because it allows such effect: if there is only one line, make it vertically centered; if there are more than one line, push them to the top of the container.

[philipwalton]

Hmmm, FF 51 displays the same as Chrome for me, but FF 52 displays as you show. That leads me to believe this was an intentional change to comply with the spec. I haven't looked into it though.

[SelenIT]

Per current spec, the behavior of Firefox and Edge is correct. If flex-wrap is wrap, the flex container is considered multi-line and should obey the align-content property, even if it actually has only one flex line. Issue #155 has links to the relevant spec change and the Chrome bug (still open).

I had the exact reverse problem today: to push several flex items to the top, stretching them to the height of the tallest item in each line. If there is only one line, the items in Chrome/Safari suddenly start to stretch to the height of the container, breaking the consistency.