Flexbox在Firefox 52中不会垂直拉伸

Question

我尝试以下草图（https://jsfiddle.net/m4njf8bL/）：

<div style="position: relative; display: flex; height: 100px; border: 1px solid red; padding: 5px;">
  <button style="position: relative; display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch; justify-content: center; border: 1px solid green; ">
    <span style="display: flex; flex: 1 1 auto; align-items: stretch; justify-content: center; border: 1px solid blue;">Ololo</span>
  </button>
</div>

除Firefox外，所有浏览器的内部跨度都会垂直延伸。为什么并且有解决方法？