firefox flex不支持滚动条
Firefox Flex是一个用于创建灵活布局的CSS属性，它可以让元素根据可用空间自动调整大小和位置。然而，Firefox Flex不支持直接添加滚动条。
要在Firefox中实现滚动条，可以使用以下方法之一：
- 使用overflow属性：将包含内容的容器元素的overflow属性设置为"auto"或"scroll"，这样当内容超出容器的可见区域时，会自动显示滚动条。例如：
.container {
display: flex;
overflow: auto;
}- 使用flex子项的min-width或min-height属性：如果希望某个flex子项具有滚动条，可以将其min-width或min-height属性设置为0，并将overflow属性设置为"auto"或"scroll"。例如：
.container {
display: flex;
}
.scrollable-item {
min-width: 0;
overflow: auto;
}这样，当flex容器的宽度不足以容纳所有子项时，该子项将自动显示滚动条。
需要注意的是，以上方法适用于大多数现代浏览器，包括Firefox。但是，具体的实现可能因浏览器版本和CSS属性的兼容性而有所差异。因此，在实际开发中，建议进行兼容性测试并根据需要进行适当的调整。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
相关·内容
2回答
为没有固定大小的表创建一个可滚动的容器，该容器还可以防止父元素(包括浏览器窗口)上的滚动条。
html、css、flexbox
期望产出：
红色div (table-container)将在其包含的表周围显示垂直/水平滚动条。
浏览器窗口或父元素上不会出现滚动条。
实际产出：
水平滚动条和垂直滚动条显示在浏览器窗口和table-container div上。
表的高度不受限制。
我想避免的解决办法：
在table-container上放置固定的高度/宽度。注意，body被限制为100 vw/vw。
试图修改表，即使用类似于table-layout的内容。
编辑:在这个示例html中指定了表的高度和宽度，只是为了说明这个问题。在我的应用程序中，我无法控制表的
浏览 5提问于2021-08-22得票数 2
回答已采纳
2回答
溢出:嵌套的柔性盒中的auto
css、html、flexbox
目前，我正在试验柔性盒布局，当我嵌套多个柔性盒时，overflow不会被应用，这有一个问题。
只要我只使用一个级别的flex框(参见示例1)，一切都正常:一旦其内容超过给定的空间，滚动条就会应用到红色框(#top)上。
但是，如果我介绍另一层柔性盒(参见示例2)，蓝色框(#right)上没有滚动条。相反，滚动条出现在主体元素上，完全忽略了蓝色框上的overflow: auto设置。
因此，我的问题是:当使用嵌套的柔性盒时，如何让overflow 工作？
备注:我用Chrome45、Firefox40和IE11进行了测试。这种行为在所有方面都是一致的。
下面是代码以及两种情况下的小提琴链接。
浏览 2提问于2015-06-18得票数 3
回答已采纳
1回答
当文本内容太长时，停止flex子程序的增长
html、css、flexbox
我有一个柔韧的布局，如下所示：
这很好，但是当产品描述很长时，我想隐藏溢出并显示省略号。
有一个包含类info-container的flex容器，它有2个flex子容器-- left (30%)和right (70%)。right div本身就是一个flex容器。问题是，当文本太长时，这个div会扩展：
HTML是：
<div class="info-container top">
<div class="left">
<div class="item-image-container"
浏览 6提问于2017-12-05得票数 0
回答已采纳
2回答
无法使overflow-x在全宽的flexbox列中工作
css、flexbox
我正在尝试用flexbox创建一个两列的布局。一个是侧面的固定宽度，另一个(主列)填充剩余的空间。
它一直工作，直到我把一些内容放在比屏幕更宽的overflow-x: scroll家长的屏幕上。现在，这种广泛的内容不再受其滚动条父级的限制。
示例如下：
.container {
display: flex;
}
.container .col-main {
background: gold;
flex: 1 1 100%;
}
.container .col-side {
background: cornflowerblue;
flex: 0 0 15em;
}
.sli
浏览 1提问于2017-04-05得票数 7
2回答
防止弯曲项目超过父级高度，并使滚动条工作。
css、twitter-bootstrap、firefox、flexbox
如何防止具有滚动条和flex:1的子div在Firefox中超过其父柔箱的高度？它在Chrome中工作正常。
CodePen链接(如果您喜欢它而不是堆栈溢出片段)：
详细信息
我有一个固定高度的柔性容器。它有一个flex-direction:column设置，它包含多个儿童div，这些div将被垂直叠加。其中一个子div被赋予一个flex:1属性，而另一个则被赋予固定的高度。
我的期望是，带有flex:1属性的子div将展开以填充剩余的垂直空间。这如预期的那样起作用。
我还为子div提供了一个overflow-y:scroll属性，以便如果其子div中的内容超过其高度，滚动条就会出现。这在Ch
浏览 0提问于2018-09-24得票数 18
回答已采纳
2回答
当flex项目有滚动条时，防止文本换行
html、css、scrollbar、flexbox
我想要显示最大高度的内容，但宽度可变。
如果内容太高，我希望滚动一个特定的子元素，而不是整个内容。
如果我在所述子元素上设置了overflow-y: auto，那么如果出现滚动条，那么如果使用更大的宽度(滚动条的宽度)，子元素的内容就会自动换行。
如果设置为overflow-y: scroll，则避免了换行，但即使不需要，也会显示滚动条。
有没有办法避免不必要的换行而又不总是显示滚动条？
.outer {
display: flex;
flex-direction: row;
}
.flex-container {
display: flex;
flex-
浏览 0提问于2016-06-30得票数 1
2回答
挠曲盒布局和嵌套滚动条问题
html、css、flexbox
嵌入滚动条不能在简单的柔性盒容器中工作。浏览器自动显示水平滚动条。
我在这个简单的例子上做错了什么？
当我在"display: flex;"上删除flexContainer时，嵌入的滚动条可以工作。当然，我的整个版面都被毁了。
我只找到了以下内容，但该解决方案与垂直滚动条有关，在这里不起作用：
.flexContainer {
display: flex;
}
.sidebar {
flex: 1 0 auto;
min-width: 150px;
max-width: 190px;
color: white;
background: blue;
浏览 2提问于2020-11-04得票数 0
回答已采纳
2回答
在列挠性盒上显示溢出滚动条
html、css、flexbox
我试图在我的项目上设置一个无限滚动，但要使overflow-y: auto; css属性工作起来有困难。以下是我目前的布局：
我使用以下CSS/HTML代码创建它：
<div class="flex-items">
<div v-for="game in gamesData.games" class="card-spacing">
<!-- Contents -->
</div>
</div>
.flex-items {
flex:
浏览 5提问于2020-11-14得票数 0
回答已采纳
1回答
如何使图像响应在可滚动的行中对齐？
html、css、responsive-design
我试图在一个单独的、可滚动的行中为摄影组合对齐我的图像，还想使它们响应窗口调整大小和其他屏幕大小。本质上就是让它们随着屏幕的变化而缩小和增长。以前，我把它们放在可滚动的行中，但现在我已经尝试让它们响应，它们只是调整和缩小，没有滚动显示整个图片库，但是它们都很小，因为它们都试图安装在窗口中。
到目前为止，我的情况如下
img {
display: block;
width: 100%;
transition: .3s;
}
.flex-container {
display: flex;
padding: 5px;
transition:
浏览 1提问于2021-08-12得票数 0
回答已采纳
2回答
如何使图像始终加载在页面的中心？
jquery、html、css
我正试图用图片制作网页，其中有产品在中心。但是产品被切断了，我不得不向下滚动才能看到整个图像。
你如何使它加载，使图像成为中心？
in the body
<img alt="The Argan Tree Product Line" src="images/products2.jpg" id="bgimage" class="mainimage"/>
用于元素的css
#bgimage{
z-index: -999;
width: auto;
height: 100%;
top: 0;
left: 0
浏览 4提问于2013-09-22得票数 0
回答已采纳
2回答
子div中不考虑溢出的滚动条
html、css、overflow、carousel
我正在尝试一个旋转的产品，这些产品部分在屏幕之外，可以滚动，以模拟移动设备的一个组件。
滚动条不会到达产品-旋转木马类的末尾，但是如果我删除卡类中隐藏的溢出，我可以看到在父div的底部有一个滚动条可以正确地工作。我想把这种行为转移到旋转木马上。
我需要做什么才能看到旋转木马下正确的滚动条而不是父div？滚动父div结果显示背景，我只想让产品向左/右滑动。
滚动条不考虑溢出
旋转木马有正确的宽度
删除卡父级溢出后，将显示正确的行为，但对于父级(参见底部的小滚动条)。
<div class="cards">
<div cla
浏览 0提问于2020-05-07得票数 0
回答已采纳
1回答
Flexbox滚动或拉伸在Firefox中不能正常工作
html、css、firefox、flexbox
我已经创建了一个基于flexbox结构的网站。我的目标是让div填充整个可视页面，但要避免让div低于浏览器窗口的下限。当文本溢出时，我的一个div应该会滚动，但在Firefox中，它会影响整个页面。
这是我的HTML：
<div class="header_bar">header</div>
<div class="page_grid">
<div class="pg_nav">nav</div>
<div class="pg_main">T
浏览 1提问于2015-11-12得票数 4
1回答
Flexbox没有在Safari 9.1.1上工作
css、safari、flexbox
下面的图表适用于Chrome和Firefox，但Safari正在缩小盒子的宽度。这也发生在移动客户端上。我包括图表容器的css和完整标记和css的代码。
#chart-container{
width: 100%;
height: auto;
border: 1px solid #39c3ec;
/*display: -webkit-box;*/
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webk
浏览 2提问于2016-07-06得票数 5
回答已采纳
1回答
禁止父div宽度动态高度扩展以适合子内容
html、css
我有一个container，它适合整个视口与nav，main和footer节点。main节点需要填充页面的所有可用空间，因此它的高度是动态的。在main节点内部，我有一个很短的节点层次结构，其中cats节点可能不适合父节点。
<div class="container">
<nav>
<input />
</nav>
<main>
<div class="scrollable">
<div class="cats">
浏览 10提问于2018-12-14得票数 0
回答已采纳
3回答
Safari、Firefox和Edge对Chrome浏览器(溢出-y)滚动的不同行为
css、google-chrome、webkit、flexbox、twitter-bootstrap-4
在这个页面上的柱塞()有一个奇怪的问题。
在Windows和Android (金丝雀)的Chrome上，一切都很好。我可以滚动两个区域(在左边和右边)和页面的顶部和底部的div在我的设备屏幕的顶部和底部。我随时都能看到它们(见下面的图片)。
在iPad或iPhone、iOS、Safari或Chrome上，这不是我能得到的。Windows上的Firefox 47.0.1也是如此。
页面很长，右边只有一个卷轴，就像页面上没有柔性盒，这段代码就会被忽略：
.bigone {
display: flex;
min-height: 100vh;
flex-direction: co
浏览 6提问于2017-04-03得票数 10
2回答
我使用CSS为两个同级DIVs (一个div.header和一个div.body)设置样式，以便它们的宽度相等，标题的最小宽度是它的div.wrapper的最小宽度，这样当比标题更窄时，滚动条就会出现在浏览器窗口中。
但是，当div.body中的div.content扩展到div.body之外时，我也试图让滚动条出现在div.body上。目前，div.body进行了扩展以适应其内容。我还希望div.body在div.content很小的时候填充垂直空间。
编辑:这是很难解释的，所以这里有一幅可能有帮助的图片。左侧是可见的完整.header宽度。右侧在外部级别(浏览器窗口)添加滚动条，当它比.
浏览 4提问于2022-06-19得票数 1
回答已采纳
1回答
使用FlexBox网格的angular-material (mat-tab)中的水平滚动条
sass、responsive-design、angular-material、horizontal-scrolling、mat-tab
我正在尝试实现一个水平滚动条来显示图像，但是包装器(滚动容器)的宽度溢出了。我还需要使用FlexBox网格使其响应不同的屏幕大小。
HTML和SCSS的结构如下所示。容器必须位于垫-标签-组(角度材质)内。div 'item‘将包含多个项。
我在chrome上运行它，并检查了检查器，显然是mat-tab-body-wrapper display: flex属性导致了这个问题。有没有解决这个问题的办法？
HTML
<mat-tab-group>
<mat-tab label="First">
<div class=
浏览 11提问于2021-06-28得票数 1
1回答
内容过多的Flexbox项目只适用于Chrome
html、css、cross-browser、flexbox
请看一下这支钢笔：
body{ margin: 0;}
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
.top-bar {
background-color: darksalmon;
height: 50px;
}
.inner-container {
flex: 1;
background-color: chocolate;
width: 100%;
height: 100%;
display: flex;
flex
浏览 1提问于2017-07-06得票数 9
回答已采纳
1回答
所需的布局：
所以我有这个布局，它应该居中，不应该超过1440px，它被分成两个部分，让我们称它们为'sider‘和'content’。sider是max-width: 560px，container是max-width: 880px，加上1440px。
很有道理，对吧？内容可以无限长，滚动条绝对必须在屏幕的一侧。
因此，百万美元的问题是，我如何将这些人放在中心？
下面是我的布局的一个复制的简化代码：
HTML：
<div class="content-body">
<div class="sider-container
浏览 3提问于2020-08-20得票数 0
2回答
防止两个浮动的兄弟姐妹变宽包装在容器内？
html、css、css-float
我遇到了浮标的问题。我有两块硬币，我需要一直并排，在同一条线上。当屏幕缩小时，它们不应该包装。一个必须向左浮动，另一个必须向右浮动。如果屏幕宽度太小，无法完全显示两个div，那么用户必须能够滚动主窗口以查看所有内容(滚动条应该在用户期望的位置，而不是“内部”滚动条)。我只希望在两个浮动的div都不是完全可见的情况下，滚动条是可见的--否则滚动条不应该是可见的。
问题是，即使我将容器设置为使用white-space: none;或overflow: visible，div仍然会包装。
我需要迪夫们时刻保持一致。
重要注意事项：，两个浮动的div的内容在宽度上是可变的；我已经为演示编写了一些大小，
浏览 3提问于2015-11-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
