flex布局下overflow失效问题
经常我们会使用flex布局,但是flex布局常常会遇到一些不可思议的麻烦,下面介绍一下overflow遇到的麻烦
我在工作中使用了左右两栏布局
.container {
display: flex;
}
.left {
flex:;
overflow: auto;
}
.right {
width: 500px;
}
我的想法是左边宽度要自适应,而且需要滚动条,虽然这样设置了,但奇怪的事情发生,左边的内容并没有出现滚动条,通过查阅资料,可以通过如下办法解决
.container {
display: flex;
}
.left {
flex:;
overflow: auto;
width:;
}
.right {
width: 500px;
}
样式需要多加一个 width: 0;
flex布局下overflow失效问题的更多相关文章
- flex定位下overflow失效的问题研究
概述 这是我在写移动端页面遇到的问题及解决方法,记录下来供以后开发时参考,相信对其他人也有用. 问题 之前写移动端页面,有一个顶条是导航条,需要固定在页面顶部,并且里面的元素需要可以左右滚动. 但是当 ...
- flex布局下el-table横向滚动条失效
如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...
- flex布局下,css设置文本不换行时,省略号不显示的解决办法
大致是有一个main容器是flex布局,左边一个logo固定宽高,右边content动态宽度. <div class="main"> <img alt=" ...
- flex 布局下,css 设置文本不换行时,省略号不显示的解决办法
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. <div class="main"> <img a ...
- flex布局下, 内容改变 不重新渲染问题
当使用flex布局时,flex内元素包含的内容改变时,浏览器不会进行重新渲染, 答案引用 http://stackoverflow.com/questions/23474191/flexbox-hei ...
- 解决flex布局下, elementui table组件不能跟随父组件的宽度而变化的bug
bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...
- ie6、ie7下overflow失效
如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute, 那么在ie6和ie7下父对象的overflow会失效,解决办法是给父对象加rel ...
- flex布局下img图片变形的解决方法
图片正常效果 图片变形效果 一.flex-shrink: 0 给 img 设置 flex-shrink: 0; flex-shrink 的默认值为1,如果没有显示定义该属性,将会自动按照默认值 ...
- iphone下overflow失效问题的解决方法
overflow-y: auto; -webkit-overflow-scrolling:touch; /*加上这个让浏览器支持touch和自动滚动这样界面就可以滚动了*/
随机推荐
- LOJ#2722 情报中心
解:有个暴力是枚举两条链然后O(n)判定,可以得到15分. 还可以优化一下,枚举一条链,然后第二条链直接求两端点树上带权距离.可以做到O(m(n + m)),但是我用的树剖,跟上面那一档没啥区别Orz ...
- 【LOJ6284】数列分块8
题目大意:维护一个序列,支持区间染色,查询区间中等于某个颜色的点的个数. 题解:考虑直接用线段树进行维护,维护区间相同颜色值和一个区间颜色是否相同的标记即可. 代码如下 #include <bi ...
- (转)Java并发编程:线程池的使用
背景:线程池在面试时候经常遇到,反复出现的问题就是理解不深入,不能做到游刃有余.所以这篇博客是要深入总结线程池的使用. ThreadPoolExecutor的继承关系 线程池的原理 1.线程池状态(4 ...
- 64位win8.1系统 运行 32位程序,文件夹路径是中文遇到问题
今天有一位用户向我反应软件使用遇到问题. 用户使用的是64位win8.1系统,之前有很多用户使用64位的win8.1系统没遇到过问题. 远程协助了一下,差不多15分钟我试了几个办法没解决问题. 最后我 ...
- long long
1. ll a; scanf("%d",&a); 数据读入后,产生错误 2. const ll inf=1e18; 3. int * ll = ll ll * int = ...
- mfc 中的error RC2104 : undefined keyword or key name
http://bbs.csdn.net/topics/340253236 需要在此文件中添加该按钮 声明一下. 但是在resource.h中已经定义了:#define IDC_ETHCONF_CHKP ...
- React学习及实例开发(一)——开始(转载)
https://www.cnblogs.com/MaiJiangDou/p/9245063.html#4136668 转载 一.构建一个新项目 1.命令行运行如下命令,构建一个新的react项目 np ...
- 完美解决windows+ngnix+phpcgi自动退出的问题
[摘要]在windows下搭建nginx+php环境时,php-cgi.exe会经常性的自动关闭退出,本文介绍通过使用xxfpm进程管理器管理php-cgi.exe. php-cgi.exe在wind ...
- (最小生成树) codeVs 1231 最优布线问题
题目描述 Description 学校需要将n台计算机连接起来,不同的2台计算机之间的连接费用可能是不同的.为了节省费用,我们考虑采用间接数据传输结束,就是一台计算机可以间接地通过其他计算机实现和另外 ...
- OpenOCD-JTAG调试
目录 Todo 概述 断点 快速使用 测试led的断点 NAND调试(进阶) OpenOCD 启动OpenOCD OpenOCD命令 OpenOCD烧录程序 GDB GDB命令 使用条件 使用步骤 E ...