Css Firefox 33:Flexbox问题，高度为100%，内容合理：与子对象之间的空间大于100%

我这里有一个演示：

在所有现代浏览器中，所有列表项后的侧栏中都有一个红色按钮

这是通过以下方式实现的：

<div class="menu">
    <ul />
    <button />
</div>

  height: 100%;
  justify-content: space-between;

问题出在旧版本的firefox中，如下几行：

<div class="menu">
    <ul />
    <button />
</div>

  height: 100%;
  justify-content: space-between;

把按钮放在一种“位置：绝对；底部：0”的定位方式

---

有人知道firefox解决这类问题的方法吗？最后36个版本的浏览器运行良好我专门下载了Firefox V.33并找到了解决方案，下面是我的代码

但我必须说，请更新您的浏览器，最新版本是70左右，所以，我希望你能理解

我们开始吧

在主类中创建一个div并将其赋给css:--
显示器：flex； 弯曲方向：立柱；证明内容：之间的空间；最小高度： 100%;

你可以把我的代码和检查在你的浏览器，让我知道它的帮助与否

HTML

<div class="menu">
  <div class="outer" style="display: flex; flex-direction: column; justify-content: space-between; min-height: 100%;">
    <ul class="example-a">
      <li>Lorem.</li>
      <li>Rerum.</li>
    </ul>
  </div>
</div>

---

我专门下载了Firefox V.33并找到了解决方案，下面是我的代码

但我必须说，请更新您的浏览器，最新版本是70左右，所以，我希望你能理解

我们开始吧

在主类中创建一个div并将其赋给css:--
显示器：flex； 弯曲方向：立柱；证明内容：之间的空间；最小高度： 100%;

你可以把我的代码和检查在你的浏览器，让我知道它的帮助与否

HTML

<div class="menu">
  <div class="outer" style="display: flex; flex-direction: column; justify-content: space-between; min-height: 100%;">
    <ul class="example-a">
      <li>Lorem.</li>
      <li>Rerum.</li>
    </ul>
  </div>
</div>