alight-item with flex inside button tag does not work in google chrome

Question

The child inside button in google chrome browser always centered. The align-items doesn't work.

However in firefox it works:

.button {
  height: 200px;
  display: flex;
  align-items: flex-end;
}

https://jsfiddle.net/0u3c1gre/1/