经常我们会使用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失效问题的更多相关文章

  1. flex定位下overflow失效的问题研究

    概述 这是我在写移动端页面遇到的问题及解决方法,记录下来供以后开发时参考,相信对其他人也有用. 问题 之前写移动端页面,有一个顶条是导航条,需要固定在页面顶部,并且里面的元素需要可以左右滚动. 但是当 ...

  2. flex布局下el-table横向滚动条失效

    如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...

  3. flex布局下,css设置文本不换行时,省略号不显示的解决办法

    大致是有一个main容器是flex布局,左边一个logo固定宽高,右边content动态宽度. <div class="main"> <img alt=" ...

  4. flex 布局下,css 设置文本不换行时,省略号不显示的解决办法

    大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. <div class="main"> <img a ...

  5. flex布局下, 内容改变 不重新渲染问题

    当使用flex布局时,flex内元素包含的内容改变时,浏览器不会进行重新渲染, 答案引用 http://stackoverflow.com/questions/23474191/flexbox-hei ...

  6. 解决flex布局下, elementui table组件不能跟随父组件的宽度而变化的bug

    bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...

  7. ie6、ie7下overflow失效

    如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute, 那么在ie6和ie7下父对象的overflow会失效,解决办法是给父对象加rel ...

  8. flex布局下img图片变形的解决方法

      图片正常效果   图片变形效果 一.flex-shrink: 0 给 img 设置 flex-shrink: 0; flex-shrink 的默认值为1,如果没有显示定义该属性,将会自动按照默认值 ...

  9. iphone下overflow失效问题的解决方法

    overflow-y: auto; -webkit-overflow-scrolling:touch; /*加上这个让浏览器支持touch和自动滚动这样界面就可以滚动了*/

随机推荐

  1. 用标准C编写COM dll

    参考资料: 用标准C编写COM(一)COM in plain C,Part1 (http://blog.csdn.net/wangqiulin123456/article/details/809235 ...

  2. 转:mysql分页原理和高效率的mysql分页查询语句

    (转自:http://www.jb51.net/article/46015.htm) 以前我在mysql中分页都是用的 limit 100000,20这样的方式,我相信你也是吧,但是要提高效率,让分页 ...

  3. c#Linq联合查询

    public void Test2() { var queryResult1 = from e in empArray from l in empLevelArray select new { e, ...

  4. Cookie隐藏小广告

    方式一:在close.php页面上设置COOKIE, colse.php页面 <?php setcookie('hide','1'); header('Location: indes.php') ...

  5. 二维数组过滤,根据多个条件获取二维数组中指定的arr

    /** * 二维数组过滤,根据多个条件获取二维数组中指定的arr * @param $data_arr * @param $lm_number * @param $source_type * @par ...

  6. asp一句话

    <%eval""&("e"&"v"&"a"&"l"&& ...

  7. python学习笔记--文件重命名,删除及文件夹

    文件重命名 import os os.rename('123.txt','456.txt') 删除文件 >>> import os >>> os.remove('4 ...

  8. 转载:C++ 二维数组new

    来源:http://developer.51cto.com/art/201002/183127.htm C++编程语言中有一种叫做new的二维数组,它的应用方式比较灵活,可以有多种方法来帮助我们实现一 ...

  9. Shell 同步时间脚本

    Linux系统同步时间脚本 Linux操作系统,如果时间和网络时间差距太大的话.可能会导致程序,进程启动不了.所以linux系统时间同步显得尤为重要,本文在借鉴网上众多资料后,以centos_6.X系 ...

  10. python要点简要-一日精通python

    Python2.x是历史,Python3.x是这门语言的现在和未来.Python2和3大约90%的地方都很相似的. 1.注释 单行注释:在注释的前面输入#号,如下: # 这是一条注释 多行注释:使用三 ...