在flexbox Div中添加可滚动Div
在flexbox中添加可滚动的Div，可以通过设置Flex容器和Flex项的属性来实现。
首先，将外层的Div设置为Flex容器，可以使用以下CSS属性：
display: flex; // 设置为Flex容器
flex-direction: column; // 将Flex项垂直排列然后，在Flex容器中添加一个Div作为Flex项，用于容纳内容，同时设置以下CSS属性：
flex: 1; // 让该Flex项占满剩余空间
overflow-y: auto; // 添加垂直滚动条最后，将需要滚动的内容放置在这个Flex项内：
<div style="display: flex; flex-direction: column;">
<div style="flex: 1; overflow-y: auto;">
<!-- 可滚动内容 -->
</div>
</div>这样，当内容超出Flex项的高度时，会自动出现垂直滚动条，实现可滚动的效果。
在实际应用中，这种可滚动的Flexbox布局适用于需要在一定高度内显示可变数量的项目，比如聊天记录、商品列表等。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云开发者工具套件：https://cloud.tencent.com/product/devtools
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网通信（IoT）：https://cloud.tencent.com/product/iotcloud
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云视频直播（Live）：https://cloud.tencent.com/product/live
相关·内容
我想添加滚动内我的主页面布局，其中有左和右面板。 在右边的面板，我想有可滚动的div，但整个页面不应该有滚动条。class="body-container"> <p> Left Panel </p> <di
浏览 34提问于2017-02-15得票数 2
回答已采纳
我找到了一篇关于flex布局的文章，其中包含了这个页眉、内容、页脚： <div class="flexbox-item header"></div>
浏览 1提问于2020-05-01得票数 2
回答已采纳
在使用css和flexbox创建可滚动面板时，我遇到了布局问题。我看过这个()编辑:我在使用flexbox的可滚动区域时遇到的一个问题是，元素被压碎并被强行装入该区域，因此它没有机
浏览 0提问于2014-09-21得票数 0
1回答
我试图用Flexboox和Bootstrap 4来实现这个布局：
HTML： header<app> nav <article> </article>CSS： margi
浏览 4提问于2018-01-06得票数 1
回答已采纳
2回答
我有一个容器具有灵活的宽度(100%)和块元素，其中的动态添加。text2 </div> <span>element2</span> border: 1px solid blue;
浏览 4提问于2020-03-04得票数 0
回答已采纳
在更深的层次上是主要内容(黄色)。我想让它水平滚动，但只有当.flexbox和.content之间的.content不存在时，它才能工作。因此，如果div存在，.content上的.content就不会像我预期的那样运行。overflow-x: scroll; }
display: inline-block;<d
浏览 3提问于2017-06-26得票数 2
回答已采纳
2回答
我在td中填充了大量的文本。如果文本内容占用了足够的空间，我会尝试使用td对文本进行换行，但文本总是从表中分离出来。13px Calibri;} height: 30px;} <div style="width:730px; margin:0 auto;">
浏览 3提问于2016-03-11得票数 1
我在玩flexbox，当我试图制作一个可滚动的天数列表时，我注意到“一周”的前两天被“吞噬”了。容器是可滚动的，但列表的开头不会显示。基本代码： <div class="p-1 p-sm-3">
浏览 13提问于2021-01-05得票数 1
回答已采纳
2回答
此外，我还有一个按钮可以切换flex-direction of flexbox 容器，这样我就可以恢复演示顺序。因此，当它位于顶部(flex-direction: column;)时-在容器的开头滚动(列表中有10项)，但是当我应用flex-direction: column-reverse; -我仍然可以看到这个元素，但现在滚动在容器的底部：为什么滚动框跟随具有最低order 属性的元素？这是我在中的代码或下面的内联代码
&
浏览 0提问于2018-06-12得票数 3
回答已采纳
页眉和页脚都不应该有滚动条。如果它们之间的内容很长，则应该向内容本身添加一个滚动条。无论我做什么，我都不能让它只在CSS上工作。我可以滚动到整个页面(或者顶部区域，包括页眉)，或者内容div的文本超出了它的边界。哦没有了JavaScript..。:)
谢谢。
浏览 1提问于2013-07-15得票数 0
回答已采纳
1回答
<div id="my-element"> <div id="body"> <div id="footer">...</div>目
浏览 1提问于2016-02-03得票数 0
回答已采纳
1回答
我正在制作一个水平滚动的站点，并且遇到了一个问题，在使用flexbox时，我的内容被我的背景图像推出了页面。请看我的笔：
我使用了三个背景图像，每个图像占用整个页面的宽度和内联块来创建水平滚动。此外，我想添加flexbox，这样我就可以在每个背景图像上创建我自己的网格系统。问题是，当我添加flexbox时，我必须在背景图像下面的第一个div上使用position: absolute，这样背景图像就不会被下推到页面底
浏览 0提问于2017-11-14得票数 1
除了使用flexbox之外，还有什么方法可以在容器内设置高度，在容器中，兄弟姐妹动态地改变其大小？只使用CSS。<div class="widget"> <div class="content">...
浏览 0提问于2018-10-17得票数 0
回答已采纳
1回答
我决定给自己做一个新的入门页面，作为学习flexbox和其他一些东西的一种方式。现在我的问题是，我有一个div，其中几乎没有其他可滚动的div。但我不想使用普通滚动，我想要一些可以移动整个div的东西，如果我用鼠标滚动，我得出的结论是我将不得不使用translateY，但我不知道如何使用它 <div class=&q
浏览 0提问于2019-11-28得票数 1
这三行的高度加在一起是100%，并且必须始终在页面上可见，无需滚动。在流体行中，我有一个模块，它必须占据100%的高度。此外，在模块中，我需要使用overflow:auto。border-box; html, body { padding:0; } .flexbox-parentjustify-content: flex-start;
浏览 13提问于2018-03-05得票数 0
回答已采纳
我正在尝试做一个flexbox的设计。我不是HTML/css专家。:(几天来，我试了很多，读了很多书，但就是不能让它工作。如何让可滚动内容区域内的div占据整
浏览 48提问于2017-12-06得票数 18
回答已采纳
我有一个可滚动的div。在这个div中，我有一个绝对定位的覆盖。不幸的是，这个覆盖卡在顶部。因此，当我向下滚动时，覆盖图保持在顶部：.list { width: 300px; overflow-x: hidden: 12px; border: 2px solid; display: -webkit-box;
浏览 0提问于2019-08-10得票数 1
我使用过bootstrap，但对flexbox css来说还是个新手。模板： <!. -->
<&#
浏览 6提问于2015-08-18得票数 1
3回答
我有一个有两列的flexbox布局。你怎么能这样做呢？看一下下面的代码：#parent {} flex-grow: 1;#left div { backgroundtop: 0; height: 100vh;#right { background: red;}
<
浏览 2提问于2016-12-31得票数 13
回答已采纳
主内容div是一个带有overflow-y: hidden的Flexbox，有2个子div:第一个用于LHS侧栏，第二个用于主页面内容。
注意，左边栏和主页内容独立滚动，整个页面本身根本不滚动。除非我误解了正在发生的事情，否则Stripe似乎在使用主div中的溢出隐藏属性来确保页面内容div不会超出视区，因此整个页面是不可滚动的。内部div使用overflow-y-auto来确保其中的内容是
浏览 15提问于2022-12-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
