滚动不使用Firefox的CSS3弹性框 [英] Scroll not working with CSS3 flex box in Firefox

问题描述

我使用 box-flex 来进行布局，但我无法获取弹出框滚动。

I am using box-flex for my layout, but I am unable to get the flex box to scroll.

HTML ：

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中，我想使用 auto 并停止弹出框垂直扩展。设置 box-flex：0; 无效。

In Firefox I want it to scroll with overflow:auto and to stop the flex box from expanding vertically. Setting box-flex: 0; is not working.

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

Any suggestions on how to achieve this?

推荐答案

我有一个类似的问题，在Firefox的弹出框垂直滚动。当内容垂直溢出时，Firefox会显示滚动条，但没有滚动句柄，内容框保持固定和不可滚动。

I had a similar problem with vertical scrolling on a flex box in Firefox. When content overflowed vertically, Firefox would display scrollbar gutters, but no scroll handle, and the content box remained fixed and unscrollable.

我解决了这个问题，高度到具有flex-box属性的框。我需要设置一个最小高度反正，但你可以在最小高度：1px在任何情况下。

I solved the issue by simply adding a min-height to the box with the flex-box property. I needed to set a min-height anyway, but you can hack in min-height:1px in any case.

我只测试了这种行为在Firefox 13，YMMV 。

I have only tested this behavior in Firefox 13, YMMV.

这篇关于滚动不使用Firefox的CSS3弹性框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！