滚动不使用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屋!