经常我们会使用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# Winfrom常用的几个公共控件

    ComboBox控件的使用方法: //首先写好查询方法,实例化对象, NationData nd = new NationData(); List<Nation> NN = new Lis ...

  2. A1042. Shuffling Machine

    Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...

  3. vue学习(2)

    node.js介绍与npm操作 1.node就是JavaScript的一个运行环境(平台),他不是一门语言,也不是JavaScript框架,可以用来开发服务器端应用程序,web系统,其特点是体积小.快 ...

  4. 斯坦福大学公开课机器学习: machine learning system design | prioritizing what to work on : spam classification example(设计复杂机器学习系统的主要问题及构建复杂的机器学习系统的建议)

    当我们在进行机器学习时着重要考虑什么问题.以垃圾邮件分类为例子.假如你想建立一个垃圾邮件分类器,看这些垃圾邮件与非垃圾邮件的例子.左边这封邮件想向你推销东西.注意这封垃圾邮件有意的拼错一些单词,就像M ...

  5. java指定编码的按行读写txt文件(几种读写方式的比较)

    转: java指定编码的按行读写txt文件(几种读写方式的比较) 2018年10月16日 20:40:02 Handoking 阅读数:976  版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  6. 第九节、人脸检测之Haar分类器

    人脸检测属于计算机视觉的范畴,早期人们的主要研究方向是人脸识别,即根据人脸来识别人物的身份,后来在复杂背景下的人脸检测需求越来越大,人脸检测也逐渐作为一个单独的研究方向发展起来. 目前人脸检测的方法主 ...

  7. ES6(promise)_解决回调地狱初体验

    一.前言 通过这个例子对promise解决回调地狱问题有一个初步理解. 二.主要内容 1.回调地狱:如下图所示,一个回调函数里面嵌套一个回调函数,这样的代码可读性较低也比较恶心 2.下面用一个简单的例 ...

  8. MegaCli命令使用详解

    一.MegaCli命令介绍 MegaCli是一款管理维护硬件RAID软件,可以用来查看raid信息等MegaCli 的Media Error Count: 0 Other Error Count: 0 ...

  9. Go-day07

    今日内容概要: 1.json解析 2.文件操作 3.命令行参数 4.错误处理 一.Golang里的类型断言 1 em必须为initerface类型才可以进行类型断言 比如如下代码会报错 s := &q ...

  10. python中字符编码及unicode和utf-8区别

    ascii和unicode是字符集,utf-8是编码集 字符集:为每一个「字符」分配一个唯一的 ID(学名为码位 / 码点 / Code Point) 编码规则:将「码位」转换为字节序列的规则(编码/ ...