Firefox中的Flexbox overflow-y滚动
Flexbox是一种用于网页布局的CSS模块，它提供了一种灵活的方式来排列和对齐元素。overflow-y是Flexbox中的一个属性，用于控制元素在垂直方向上的溢出内容的处理方式。
当一个容器中的内容超出容器的高度时，可以使用overflow-y属性来定义溢出内容的处理方式。它有以下几个取值：
- visible：默认值，内容会被允许溢出容器，并且会覆盖其他元素。
- hidden：溢出的内容会被裁剪，不可见。
- scroll：显示滚动条，即使内容没有溢出也会显示滚动条。
- auto：根据内容是否溢出来决定是否显示滚动条。
使用Flexbox布局时，可以通过设置容器的overflow-y属性来控制容器中的内容在垂直方向上的滚动方式。这在需要实现垂直滚动的列表、侧边栏等场景中非常有用。
腾讯云提供了一系列云计算相关的产品，其中与前端开发和网页布局相关的产品包括云服务器、云存储、云数据库等。您可以通过以下链接了解更多关于腾讯云的产品信息：
- 腾讯云服务器：https://cloud.tencent.com/product/cvm
- 腾讯云存储：https://cloud.tencent.com/product/cos
- 腾讯云数据库：https://cloud.tencent.com/product/cdb
请注意，以上链接仅供参考，具体的产品选择应根据实际需求进行评估和决策。
相关·内容
1回答
我试着建立两个并排滚动面板与柔印盒：
HTML:
<div class"scrollable"></div>
<div class"scrollable"></div>
SASS
@import "flex"
*
padding: 0
margin: 0
html
height: 100%
body
height: 100%
width: 100%
+flexbox()
.scrollable
overflow-y: auto
min-height: 0
浏览 2提问于2013-10-03得票数 0
我有一个有几个孩子的wraper div。因为所有孩子的身高加起来都比wrapper div的高，所以我希望父母能够滚动。
以下解决方案适用于Chrome，但不适用于Edge、IE和Firefox。我尝试过不同的方法，但我的解决方案似乎都行不通。有没有人有可以跨不同浏览器工作的解决方案？
#wrapper {
display: flex;
flex-direction: column-reverse;
background-color: green;
width: 300px;
height: 300px;
overflow-y: scroll;
}
.inner
浏览 0提问于2018-02-23得票数 2
回答已采纳
3回答
我有一个可滚动菜单，这需要是可滚动的。我使用以下命令隐藏Chrome中的滚动条：
.menu::-webkit-scrollbar {
display: none;
}
这是可行的。Firefox和MS Edge有什么相同的功能？
谢谢
浏览 2提问于2015-09-23得票数 0
1回答
在Drupal7网站中，希望在不滚动的情况下固定背景图像。使用overflow-y:隐藏，但仅在Firefox中有效。body {overflow-y:隐藏；}
overflow-y似乎在其他浏览器中不起作用。
有没有其他像overflow-y这样的方法来修复背景图像，而不需要在所有浏览器上滚动？
浏览 1提问于2014-07-25得票数 0
1回答
<textarea>fofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofooo</textarea>
textarea { width: 500px; line-height: 32px; overflow: auto; height:32px; }
我想不出如何在Firefox的文本区域中强制使用y轴滚动条。它在Chrome上运行得很好。
在Firefox中，滚动条直到达到一定的高度才会出现。
浏览 1提问于2013-06-27得票数 2
3回答
我在这个体系结构中有一个html代码：
<div id="container">
... some divs ...
<div id="results">
... some content ...
</div>
</div>
在结果中写入的内容会发生变化，有时结果的高度会超过容器的底部。我希望结果--带有滚动条的句柄溢出--而不是容器<代码>E 210</>，但我似乎无法修复这个问题。我应该怎么做呢?只要它们对窗口大小的变化是灵活的，我就可以接受jav
浏览 7提问于2017-01-05得票数 0
回答已采纳
我目前正在使用CSS上下滚动弹出页面，只是使用鼠标滚轮，但我不能让它在FireFox中工作。由于某些原因，它目前只能在Chrome中使用overflow-x:hidden和overflow-y:auto；。
我尝试过使用jQuery的鼠标滚轮插件jquery.mousewheel.min.js来让页面在没有滚动条的情况下上下滚动，但是很遗憾，我不能让它工作。仅仅使用鼠标滚轮，Firefox还需要什么东西才能上下滚动页面？是CSS、Javascript还是jQuery？
HTML
<div class="test">
<div class="inn
浏览 11提问于2013-10-14得票数 1
2回答
我正在尝试找到一种方法，让我的flexbox在IE10中正常工作：
下面是一个可以在Chrome、Firefox等浏览器上运行的例子。
我有一个绝对定位的flexbox，它有固定的页眉，固定的页脚和填充体。flexbox将占据它所需的高度，但如果它达到最大高度，则车身将开始滚动。到现在为止还好。
但是，如果您在IE10中打开该链接，它将不起作用。正文现在溢出，而不是滚动，导致列表底部和页脚都被隐藏。原因似乎是.lhs上的最大高度CSS：
max-height: 200px;
如果将其更改为“height”：
height: 200px;
然后，你瞧，它又能工作了。然而，它也阻止了flexbo
浏览 6提问于2014-04-08得票数 1
我使用css隐藏滚动条，直到悬停(在Firefox和IE上工作)
在悬停之前，它看起来是这样的：
div#popular-service-container > div:first-child > div::-webkit-scrollbar {
/* Safari & Chrome */
display: none;
}
div#popular-service-container > div:first-child > div{
overflow-y: auto;
overflow-x: hidden;
浏览 1提问于2016-12-02得票数 0
回答已采纳
4回答
我有一个带有图标菜单的侧栏。当它垂直溢出时，您应该能够垂直滚动菜单，所以我使用的是overflow-y: scroll，父程序有overflow-y auto。然而，滚动根本不起作用。
滚动条总是显示，即使内容没有溢出(只要尝试删除我的小提琴中的列表项的一半，你就会明白我的意思)
滚动条根本不起作用。它看起来是锁定的，您不能真正地拖动它来上下滚动菜单。
。
注意，我尝试过使用overflow-y: auto，但是。
另外，最后三个链接应该被推到侧边栏的底部(如果有足够的空间)。为此，我在小组的第一项上使用margin-top: auto。
HTML：
<div class
浏览 6提问于2020-01-16得票数 0
回答已采纳
我有三行:固定的，流动的，固定的。这三行的高度加在一起是100%，并且必须始终在页面上可见，无需滚动。在流体行中，我有一个模块，它必须占据100%的高度。此外，在模块中，我需要使用overflow:auto。这是我的代码：
* {
box-sizing: border-box;
}
html, body {
height: 100%;
padding:0;
margin:0;
}
.flexbox-parent
{
width: 100%;
height
浏览 13提问于2018-03-05得票数 0
回答已采纳
我使用jquery在覆盖图中打开一个局部视图(显示一个固定的div，并禁用对底层网页的滚动)。这似乎适用于桌面上的chrome和firefox，也适用于android版的chrome，但不适用于firefox/android：
$('a#manage-albums').click(function(){
$.get( this.href )
.done(function( data ) {
$('div#flvr-overlay-content').html(data);
$('di
浏览 4提问于2015-08-08得票数 2
1回答
不需要的垂直滚动条
、、、
下面是一个简单的HTML示例，其中底部容器在Chrome中有一个垂直滚动条(可能没有对齐)，而不是Firefox。
<div style="display: flex; flex-direction: column; height: 100px; width: 300px; border: 1px solid black">
<div style="background-color: burlywood; overflow-y: auto">
<div>Test</div>
<div&
浏览 5提问于2019-02-26得票数 3
1回答
我有一个模式"div“，它以弹出窗口的形式出现在主内容窗口上。现在这个模式div使用了固定的位置(实际上它是一个厚框的div)
此模式div的内容超出了可用的浏览器高度。所以问题是，在Firefox中，我无法访问这个模式div底部的内容。将显示滚动条，但不会在模式div中滚动。它滚动浏览主页。这在IE中不会发生(仅在Firefox中)
我如何解决这个问题？
浏览 7提问于2013-05-29得票数 0
我知道这是一个重复的问题，但问题仍然没有解决，在不同的网站上尝试了各种方法，但在chrome中，滚动条是隐藏的，它工作得很好，但在Mozilla Firefox中，即使我为-moz应用了隐藏的属性，它也可以显示滚动条。
下面是我的代码：
.scroll-box {
overflow-y: scroll;
height: 100px;
padding: 1rem;
overflow-x: hidden;
}
// this is for google
.scroll-box::-webkit-scrollbar {
display: none;
}
对于
浏览 1提问于2018-07-10得票数 0
我在我的CSS中使用了以下内容来强制Firefox中的垂直滚动条：
body {
overflow-y: scroll;
}
这种技术在Safari和Opera中有效吗？有人说是这样，也有人说不是。
浏览 1提问于2010-01-05得票数 3
回答已采纳
如何使用新的css3属性(例如，flexbox )将视图拆分为两列，以便左列与posts列表将滚动溢出-y映射到页面底部，并映射将填充其容器并永久停留在右侧的容器？
var post = "<h3>Post title</h3><div>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</div><hr>";
var i = 0;
while (i < 10) {
$
浏览 2提问于2015-12-04得票数 3
回答已采纳
1回答
我试图用css隐藏滚动条，但它在firefox上工作，但在Chrome中，滚动条仍然存在
.tests-container{
@media (min-width: 1025px) {
max-height: 600px;
overflow-y: scroll;
:-webkit-scrollbar{
display: none;
}
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
浏览 1提问于2020-11-20得票数 1
回答已采纳
第一个链接是flexbox 2009型号：
<div style="display:-webkit-box;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;background:#0f0;-webkit-box-flex:1;overflow-Y:scroll">
浏览 2提问于2013-04-21得票数 6
回答已采纳
滚动条在firefox浏览器中不显示，但在chrome中工作正常，下面是css代码 ::ng-deep .adf-search-fitler {
overflow-y: auto;
height: -webkit-fill-available;
width: 300px;
max-width: none;
min-width: 300px;
} ? ? This -webkit-fill-available将在chrome浏览器上运行，但“如何实现滚动条'firefox浏览器‘”
浏览 21提问于2019-06-01得票数 2
我正在尝试创建一个div，它只在元素不适合默认区域时才显示滚动条。
<div style="overflow-y: auto; height: 36px;">
<img src="." width="36" height="36" />
</div>
不幸的是，div的底部有一些填充，所以滚动条总是显示的，尽管理论上img和div应该是相同的高度。我可以在Firefox和Chrome中重现，所以它看起来不像是浏览器的bug。
为什么会发生这种情况？
浏览 0提问于2015-10-31得票数 1
我有一个row元素，包含一个普通的div和一个水平滚动的div。我希望行本身是可垂直滚动的。
也就是说，如果我向下滚动，它就会一起向下滚动。
我包含了一个显示我尝试的jsfiddle：
<div class="container">
<div class="first">
<div class="large-content"></div>
</div>
<div class="second">
<div class="l
浏览 0提问于2019-09-02得票数 0
在很长一段时间后，我现在正在尝试做一个在右侧有菜单和滚动窗格的页面。
它工作得很好，除了滚动条不会沿着页面的整个高度向下移动，而是垂直移动大约400-600像素(其他所有内容都是滚动的)。不过，我的菜单在停留在顶部的情况下工作得很好。现在我的问题是，我如何才能在剩下的窗口(菜单空间除外)中滚动条呢？
HTML文件：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mytitle</title>
<link rel=
浏览 1提问于2017-02-06得票数 0
我想隐藏在Firefox中滚动时出现在网格上的滚动条，但是我仍然可以在没有滚动条的情况下自由滚动以实现视觉效果。我对此感到厌倦： .grid {
scrollbar-width: none;
} 但是，这会垂直隐藏滚动条，而不是水平隐藏。我希望垂直滚动保持不变，隐藏水平滚动。有没有其他属性可以帮助实现这一点？
浏览 20提问于2020-04-02得票数 0
回答已采纳
我遇到了以下问题:我创建了一些可拖动的span元素(jQuery UI可拖动组件).我的页面有一个垂直滚动条。
span-element位于页面的底部，因此我必须向下滚动。
如果我开始拖动span-element (在firefox中)，元素不会直接停留在光标上-在光标和元素之间有一个“边距”，可能是光标顶部的50px。
这个问题不会出现在chrome上。
可能的问题是什么？
浏览 3提问于2011-08-08得票数 0
2回答
在我的网页上有一个下拉列表，有4个关于我们，平台，联系我们和信息的链接。当打开其中任何一个时，都会出现一个(垂直)滚动条。
对于不同的web浏览器支持，我尝试了以下代码：
.container {
-ms-overflow-style: none; // IE 10+
overflow: -moz-scrollbars-none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
在chrome和safari上都能正常工作。但对于Firefox来说
浏览 7提问于2018-02-28得票数 0
2回答
我想弄清楚如何制作一个页面卷轴的一面。例如，类似于。我想出的解决方案是将正确的列设置为这样的样式
.right-column {
overflow-y: scroll;
height: 100vh;
}
但这使得页面有两个滚动轮。有什么想法吗？我知道我给的网站使用的位置很粘，但我不知道还有什么。
谢谢!
浏览 15提问于2022-04-15得票数 -1
回答已采纳
1回答
全屏在firefox中不能滚动
、、、、
现代Chrome支持在设置为全屏模式的元素上滚动，但Firefox中的元素并非如此。有谁知道让滚动在Firefox中工作的CSS技巧吗？我尝试了很多类似的方法，如果元素在全屏模式下不适合屏幕显示，就可以在元素(在本例中是正文)上滚动。 当使用下面的代码时，打开dev工具，让它占据大约75%的屏幕，以使全屏元素不适合屏幕。 function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
}
else if (element.webkitR
浏览 55提问于2020-10-10得票数 0
1回答
我有一个溢出的容器-y:滚动。内容高于容器高度，因此滚动。
问题是如何自动调整容器的高度，当容器在一个分隔固定高度的更宽的容器div的div旁边时。
这是一个
我的代码如下：
<div ng-repeat="t in p.tabs"
class="tabContent"
ng-class="currentTab==t.name?'selected':''"
>
<div>
<h2>
浏览 4提问于2014-05-11得票数 0
1回答
修复html中的Google标头
、、、、
我正在使用google visualization table创建一个html table。我使用stuckpart div修复了html的顶部部分，这样无论我如何滚动页面，按钮都是固定的。现在，我还希望将表header固定在button下面。我的布局是这样的：
<div class="stuckpart">
<button type="button">this button is fixeddddddd</button>
</div>
<div id="table_div"&
浏览 1提问于2015-11-11得票数 0
回答已采纳
2回答
因此，我试图通过使用一个div #main和height: 100%作为一个柔性盒来获取一个标题和一些内容以适应屏幕，如下所示：
#main {
height: 150px; /* Using a fixed height here, otherwise the snippet wouldn't work */
}
.flexbox {
display: flex;
flex-direction: column;
}
.header {
flex: 0 1 auto;
border: 2px solid #aa0000;
}
.content
浏览 5提问于2018-01-22得票数 2
回答已采纳
bootstrap3.02:表格响应在手机中不起作用，但在firefox中起作用。代码如下：
<div class="table-responsive">
<table id="table12" class="table" >
<tr><td>my god </td><td>my god </td><td>my god </td><td>my god </td><
浏览 0提问于2013-11-22得票数 0
我目前正在为移动客户端开发一个固定的导航菜单。我注意到，在Firefox中，当你在div上设置overflow-y: auto和一个最大高度时，它会在Chrome和Safari中显示整个div，但在Firefox中，底部内容永远不会显示出来。我已经创建了一个代码笔来显示我的意思。尝试滚动到Chrome中的最后一项(字面意思是" Last ")，您可以到达它，但尝试在Firefox中执行相同的操作，但您不能！
max-height: 400px;
overflow-y: auto;
有谁知道这是什么原因，或者如何修复它？
浏览 0提问于2015-07-13得票数 0
1回答
如何使div垂直滚动并显示梯度
、、、、
我正试着在水平的情况下得到三分钱。我想让最左边的div滚动，这样梯度就会在用户滚动时显示出来。由于某些原因，div不是相邻的，左边的不滚动，我不知道为什么。
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%; height: 100%}
.overall {
height: 100%;
}
.scroll {
width: 10%;
height: 200%;
background: linear-gradient(#e66465, #9198e5);
overflow
浏览 0提问于2018-04-05得票数 1
回答已采纳
2回答
我正在为firefox做一个网络扩展，目前唯一的问题是没有垂直滚动条。我使用‘面板’作为chrome.windows.create上的类型，其高度和宽度为880 on。
我试过用
body{
overflow-y:scroll;
}
但这并没有给我增加一个滚动条。任何建议，如果我需要显示代码的细节，我将只是不知道从哪里开始。
浏览 0提问于2016-10-24得票数 0
回答已采纳
1回答
我在div中有一个表。由于div中缺少表数据，因此滚动条在IE和firefox中不可见。
如果数据更多，请建议如何使垂直滚动条可见。
下面是我的示例div代码：
<div align="center" style="height: 100%;overflow-y:scroll; border: 2px;">
//logic to create html tables
</div>
浏览 1提问于2015-02-28得票数 0
1回答
滚动问题
、
我对这个卷轴有一个问题，如下图所示：
问题是我只想显示垂直滚动，而不是水平滚动。我在编码时使用了overflow:scroll属性。它在Firefox和IE中看起来是一样的吗，或者有其他方法可以做到这一点吗？
浏览 1提问于2011-02-19得票数 0
回答已采纳
2回答
我正在学习HTML和CSS的web开发基础知识。我今天遇到了一个问题:我想在我的页面上做一个横向滚动，里面有段落(在这里由Lorem表示)，但是这些段落出现在直线上，而我希望它们出现在块中。
这是我的密码：
.scroll {
display: flex;
justify-content: flex-start;
flex-direction: row;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.part {
display: inline-bloc
浏览 6提问于2021-04-09得票数 0
回答已采纳
1回答
我有一个固定宽度和高度的div，其中包含一些文本。
div的样式为使用css3列，如下所示：
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
文本排列正常(moz.iexplore、chrome)，但不显示滚动条。(css: overflow:auto;)
如果我用overflow强制滚动: scroll；div会同时显示水平和垂直滚动条，但没有要滚动的“句柄”。
你知道如何解决这个问题吗？
浏览 1提问于2014-01-21得票数 0
1回答
<div style="margin:0 auto; width: 150px; height: 100px; display: flex; overflow-x: scroll; overflow-y: hidden;">
<select multiple name="" id="" style="overflow-x: scroll;">
<option value="">11111111111111111111111111111111111111
浏览 12提问于2021-12-15得票数 0
1回答
我有一个问题，我就是找不到解决的办法：
在FireFox(69.0.3)和Chrome(77.0.3865.90)中，滚动条的工作方式是不同的。我有一个绝对定位的div，包含一个div元素的列表。我希望能够将最大高度设置为可以y滚动的列表。碰巧，列表中的元素包含文本，文本应该定位在容器的对面。
.pos-absolut {
position: absolute;
right: 0;
background-color: lightblue;
}
.menuList {
max-height: 100px;
overflow-y: auto;
}
.elem{
disp
浏览 0提问于2020-08-18得票数 0
回答已采纳
有许多固定的页脚/页眉可变宽度的内容帖子，但似乎没有一个适合我的特定用例。
描述我想要的最简单的方式是google文档的风格界面，页眉和页脚是固定的，内容是X/Y滚动的，但当你开始向下滚动时，它是页眉滚动的一部分
HTML, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
div {
padding: 10px;
}
.header {
background: LightCoral;
border: 10px solid IndianRed;
}
.fixed-header {
浏览 14提问于2018-01-27得票数 0
我正在建立100%高度的应用程序侧栏，需要滚动，并在底部保留一些链接。我的解决方案在Chrome上运行得很好，但在Safari上有一个重叠问题。
基本代码如下所示：
position: fixed;
left: 0;
min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
width: 180px;
justify-content: flex-start;
overflow-y: scroll
在这里查看Codepen：
如有任何帮助或见解，非常感谢！我担心可能是这个
浏览 0提问于2016-02-19得票数 3
2回答
我正在制作一个web应用程序，似乎无法摆脱Mozilla Firefox上菜单的滚动条。它在我测试过的所有浏览器上都能完美工作，除了firefox。
以下是我用于滚动的css，目前在Chrome、IE、Edge和Opera中都有效，但在firefox中不起作用。
.main-sidebar{
position:fixed
}
.bar{
max-height: 400px;
overflow-y: scroll;
}
.bar::-webkit-scrollbar {
display: none
浏览 0提问于2016-08-30得票数 0
3回答
嗨，我有注册表.I需要它有一个垂直滚动条，我使用下面的css：
.scrollbar{
overflow-y: scroll;
height:400px;
}
上面的代码适用于Firefox和Chrome，但IE根本不显示滚动条。你知道怎么解决这个问题吗？
浏览 2提问于2017-08-26得票数 5
回答已采纳
当我在火狐44中找到一些关于pointer-events的东西时，我正在做CSS中的下拉菜单。起初，我认为这将是新版本的Firefox中发生的一个错误，但我再次看到了Firefox 25中的问题，而且它也存在于Opera 18 (运行webkit)中。
代码本身可能非常混乱，因此我做了另一个示例：
div {
width: 150px;
height: 200px;
line-height: 30px;
background: #DDD;
/*- overflow-y -*/
overflow-y: auto;
/*- pointer events -*/
浏览 4提问于2016-03-13得票数 3
回答已采纳
可能重复：
这在Chrome和Safari中运行得很好：
iframe::-webkit-scrollbar
{
display: none;
}
但是垂直滚动条并不隐藏在Firefox中。
我不能更改iframe代码，所以需要完全在CSS中。
更新：--我在上面添加了以下内容来解决这个问题。这两个区块都需要：
iframe
{
overflow: hidden;
}
但是，这种方法可能会限制我在其他地方控制x或y滚动条的能力。
哦，好吧。
浏览 1提问于2013-01-31得票数 1
我试图使用CSS (display: flex)来占据窗口的剩余高度。我也想要滚动..。也许我做错了这件事，但我一直在寻找其他的选择。
这个想法是有一个固定的容器。在这个固定的容器内是一个挠曲箱，占高度的100%。我将项添加到列中堆栈的flex框中。我添加的最后一项(容器包装)中的动态内容将通过AJAX调用替换HTML (否则，我只需将操作栏移出包装器并完成)。这个内容包装器也是一个flex容器(以及一个flex项)，并设置为随窗口高度的增长和收缩。这个flex容器的最后一项应该允许在窗口缩小时滚动。
。
<!-- The fixed container -->
<div c
浏览 2提问于2015-04-01得票数 0
回答已采纳
如何通过单击鼠标滚轮来确定水平滚动的可能性，并使用overflow-x:hidden (使用JavaScript或jQuery)在元素中禁用它？滚动在Firefox中是不可能的，但在IE，Chrome和Safari中是可能的。代码示例：
<div style="overflow-x:hidden; overflow-y:auto;">...</div>
截图：
浏览 0提问于2012-11-16得票数 8
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
