Flex方向:列不允许孩子在Firefox中滚动 [英] Flex-direction:column doesn't allow children to be scrollable in Firefox
问题描述
我为一个元素( .outer
)使用了display flex,它应该将其高度调整为内容,但不能超过一定的高度(例如 100px
)。
一旦超过高度,我希望里面的内容开始垂直滚动。 b
此行为在Chrome浏览器上按预期工作,但在Firefox中,内容包装( .wrapper
)增长到其内容高度( .list
),因此它不可滚动。
您可以使用这个简单的示例自行尝试:
.outer {display:flex; max-height:100px;溢出:隐藏; flex-direction:column;}。wrapper {display:flex;宽度:100%; height:100%;}。list {width:100%;背景:紫色; overflow:scroll;}
< div class =outer > < div class =wrapper> < div class =list> < p为H. 1·; / p为H. < p为H. 2'; / p为H. < p为H. 3'; / p为H. < p为H. 4℃; / p为H. < p为H. 5℃; / p为H. < / DIV> < / div>< / div>
$ b
https://codepen.io/anon/pen/rzOpPZ
设置 max-height
为 height
滚动的问题,但如果内容不够高,会导致一个空白区域。
添加 min-height :0
到 .wrapper
类。这将工作。
I am using display flex for an element (.outer
) which should adjust its height to the content but must not exceed a certain height (e.g. 100px
).
Once the height is exceeded I want that the content inside to start to scroll vertically.
This behaviour works as expected on Chrome but in Firefox the content wrapper (.wrapper
) growth to the height of its content (.list
) and therefore it is not scrollable.
You can try it yourself using this simplified example:
.outer {
display: flex;
max-height: 100px;
overflow: hidden;
flex-direction: column;
}
.wrapper {
display: flex;
width: 100%;
height: 100%;
}
.list {
width: 100%;
background: purple;
overflow: scroll;
}
<div class="outer">
<div class="wrapper">
<div class="list">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div>
</div>
https://codepen.io/anon/pen/rzOpPZ
Setting max-height
to height
solves the scroll problem but causes a white space if the content is not high enough.
add min-height:0
to the .wrapper
class. It will work.
这篇关于Flex方向:列不允许孩子在Firefox中滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!