经常我们会使用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. Vue+Django2.0 restframework打造前后端分离的生鲜电商项目(2)

    1.restful api介绍 1.前后端分离的优缺点 1.为什么要用前后端分离 1.pc.app.pad多端适应 2.SPA(单页面应用)开发模式开始流行 3.前后端分离职责不清 4.开发效率问题, ...

  2. java 中 byte[]、File、InputStream 互相转换

    1.将File.FileInputStream 转换为byte数组: File file = new File("test.txt"); InputStream input = n ...

  3. operation=

    x+=xxx 先执行xxx,再x=x+xxx 一个与之的问题 C(n,n/2) for (i=n;i>n/2;i--)        v*=i/(n+1-i);每次先执行i/(n+1-i),然后 ...

  4. Mock4 moco框架中如何加入cookies

    新建一个 startupWithCookies.json,因为cookies也是请求当中带的,所以,要写在request里面,cookies是k-v的形式,就拿登陆来说吧,登陆以后会的cookies, ...

  5. postman接口测试

    拿到API,直接拖到postman里面,修改一下params,send之后查看结果返回 说明一下: 1.get的内容,写入测试URL 和API地址 2.点击bulkEdit,编辑请求的key+valu ...

  6. apache2 以及https证书配置

    环境Ubuntu12.04 server 配置 1,首先在进入找到/etc/apache2/apache2.conf的配置文件,里面有包含了较多配置文件的路径如:httpd.conf/ports.co ...

  7. Ajax和Json的介绍(一)

    Ajax简介: 优点: 1.Ajax是一种网页开发技术,异步JavaScript和XML;(这样叫的原因是是因为ajax传递数据是用json格式的,而json和xml又类似,都是以键值对,josn是& ...

  8. nginx暴露目录文件

    location /apk_download { alias /usr/share/nginx/html/; include mime.types; default_type application/ ...

  9. SpringMVC简单项目配置

    一.首先,SpringMVC框架使用分层开发,分层是为了实现“高内聚,低耦合”.采用“分而治之”的思想,把问题划分开来各个解决,易于控制,延展和分配资源,最重要的是有利于后期项目维护.MVC是指Mod ...

  10. diff补丁格式

    title: diff补丁格式 tags: 学习 categories: 学习 date: 2018-09-20 21:03:53 --- diff补丁格式 在Uboot学习中,接触到了打补丁这个操作 ...