如何用flexbox实现超出div出现水平滚动条

baokeyu 2014-08-25 03:08:34

现在的情况是，超出div后，缩小每个内层div的宽度来适应外层div。
我想要的效果是，超出后，内层div不缩小，外层div出现水平滚动条，可以拖动的效果。
求大神解答！

...全文

1382 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

XZowie 2014-08-26

打赏
举报

回复

http://jsfiddle.net/swLuxpz9/

XZowie 2014-08-26

打赏
举报

回复

不知道是不是像這樣 http://jsfiddle.net/

XZowie 2014-08-26

打赏
举报

回复

flexbox 原本就是讓裡面的ITEM 浮動，去適應外面的容器裡面的ITEM 只能設比例，沒辦法像樓主說的超出容器外唷用普通的DIV就可以了吧… 這效果應該要用js實現

业余草 2014-08-26

打赏
举报

回复

flexbox是什么东东

本课程主要讲解Flex Box布局知识点，并结合实际代码进行演示教学第一章、Flexbox简介与基础概念主要对Flexbox的产生背景以及使用场景做一个介绍，同时在宏观层面介绍Flexbox的基础概念，为后面的学习做好准备。...

前不久碰到一个需求，在宽度不固定下实现横线滚动，这里我用css来写，记录下来，供以后借鉴。子元素的宽度大于父元素是，会出现滚动 overflow-x: scroll; 为水平滚动，overflow-y: scroll; 为垂直滚动，按需求这里采用水平横向滚动 html代码： <div class="content"> <div class="conten...

上下固定中间弹性滚动布局是H5页面最常见的布局方法；现在总结了3中布局方式。 1.position:fixed+overflow:scroll+js动态设置中间高度 html代码： //html结构 <nav></nav> <div class="container" id="container"> <div class="inner"&g

前言当我们布局是使用的flex布局，且使用elementui的表格的高度和最大高度设置成百分比的时候，会发现浏览器会出现滚动条，但是我们的需求又不要让最外层盒子有滚动条，我们在查看elementui官方文档发现height和max-height是number或string。二、使用步骤 1.父组件代码如下（示例）： <template> <div class="tab-box"> <div class="top-box flex-box">

多层flex布局造成滚动条失效前几天遇到一个问题，页面使用的是flex布局，当flex多层嵌套后想弄一个滚动条发现失效。如图：绿色边框的盒子里边多个div进行flex布局。在左下的蓝色div中进行内容超出出现滚动条。但是发现使用overflow-x: hidden; overflow-y: auto;的时候完全不起作用，出现的状况是想要滚动的div中子元素会将显示滚动条的div高度撑大，而没有滚动条的效果。 .scrollDiv{ flex: 1; width: 100%; h

61,115

社区成员

60,728

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章