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和自动滚动这样界面就可以滚动了*/
随机推荐
- 用标准C编写COM dll
参考资料: 用标准C编写COM(一)COM in plain C,Part1 (http://blog.csdn.net/wangqiulin123456/article/details/809235 ...
- 转:mysql分页原理和高效率的mysql分页查询语句
(转自:http://www.jb51.net/article/46015.htm) 以前我在mysql中分页都是用的 limit 100000,20这样的方式,我相信你也是吧,但是要提高效率,让分页 ...
- c#Linq联合查询
public void Test2() { var queryResult1 = from e in empArray from l in empLevelArray select new { e, ...
- Cookie隐藏小广告
方式一:在close.php页面上设置COOKIE, colse.php页面 <?php setcookie('hide','1'); header('Location: indes.php') ...
- 二维数组过滤,根据多个条件获取二维数组中指定的arr
/** * 二维数组过滤,根据多个条件获取二维数组中指定的arr * @param $data_arr * @param $lm_number * @param $source_type * @par ...
- asp一句话
<%eval""&("e"&"v"&"a"&"l"&& ...
- python学习笔记--文件重命名,删除及文件夹
文件重命名 import os os.rename('123.txt','456.txt') 删除文件 >>> import os >>> os.remove('4 ...
- 转载:C++ 二维数组new
来源:http://developer.51cto.com/art/201002/183127.htm C++编程语言中有一种叫做new的二维数组,它的应用方式比较灵活,可以有多种方法来帮助我们实现一 ...
- Shell 同步时间脚本
Linux系统同步时间脚本 Linux操作系统,如果时间和网络时间差距太大的话.可能会导致程序,进程启动不了.所以linux系统时间同步显得尤为重要,本文在借鉴网上众多资料后,以centos_6.X系 ...
- python要点简要-一日精通python
Python2.x是历史,Python3.x是这门语言的现在和未来.Python2和3大约90%的地方都很相似的. 1.注释 单行注释:在注释的前面输入#号,如下: # 这是一条注释 多行注释:使用三 ...