滚动不适用于 Firefox 中的 CSS3 弹性框答案

【问题标题】：Scroll not working with CSS3 flex box in Firefox滚动不适用于 Firefox 中的 CSS3 弹性框
【发布时间】：2012-07-04 23:52:16
【问题描述】：

我正在使用box-flex 进行布局，但我无法让弹性框滚动。

HTML：

<div class='dashboard'>
  <div><button>Widget</button></div>
  <div class="noboard"><button>Yammer</button>
  <div class="yammerboard" >
      <div><button>Dashboard22</button></div>
      <div><button>Dashboard22</button></div>
      <div><button>Dashboard22</button></div>
      <div><button>Dashboard22</button></div>
      <div><button>Dashboard22</button></div>
  </div>
  </div>
  <div><button>Notifications</button></div>
</div>

CSS：

.dashboard {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-orient:vertical;
    -ms-box-orient: horizontal;
    -moz-box-orient:horizontal;
    -webkit-box-orient: horizontal;
    border: solid 2px black;
    overflow-y:auto;
}
.noboard {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-orient:vertical;
    -ms-box-orient: vertical;
    -moz-box-orient:vertical;
    -webkit-box-orient: vertical;
    overflow-y:auto;
}
.yammerboard {
    display: box;
    display: -webkit-box;
    display: -moz-inline-box;
    display: -ms-box;
    box-orient:vertical;
    -ms-box-orient: vertical;
    -moz-box-orient:vertical;
    -webkit-box-orient: vertical;
    overflow-y:scroll;
    -moz-box-sizing: inherit;
    box-flex: 0;
    -ms-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-box-flex: 0;
    -moz-box-lines:multiple;
}

在 Firefox 中，我希望它使用 overflow:auto 滚动并阻止弹性框垂直扩展。设置 box-flex: 0; 无效。

关于如何实现这一点的任何建议？

【问题讨论】：

标签： html css scroll overflow

【解决方案1】：

我在 Firefox 的弹性盒子上垂直滚动时遇到了类似的问题。当内容垂直溢出时，Firefox 会显示滚动条间距，但没有滚动句柄，并且内容框保持固定且不可滚动。

我通过简单地使用 flex-box 属性向盒子添加一个最小高度来解决这个问题。无论如何，我需要设置一个最小高度，但无论如何你都可以修改 min-height:1px。

我只在 Firefox 13, YMMV 中测试过这种行为。

【讨论】：

【解决方案2】：

Flex 盒子现在在 Firefox 中相当古怪，它有点不完善。有一个已知问题是它们不能在固定或绝对定位的元素下工作。还要让大家知道，要在 Firefox 中使用弹性框，必须有一个宽度，否则它只会被视为内联块。

【讨论】：