经常我们会使用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. A1043. Is It a Binary Search Tree

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  2. 第三十一篇-TextInputLayout(增强文本输入)的使用

    效果图: 密码使用的是增强文本输入类型,当密码长度小于6或者密码长度大于10的时候就会给出提示. main.xml 当添加TextInputLayout时,旁边会有一个下载符号,如果点不动,可以右键点 ...

  3. java List<String> 转换成带逗号的字符串

    使用commons-lang3-3.3.2.jar org.apache.commons.lang3.StringUtils.join(applyNameList, ",");

  4. 斯坦福大学公开课机器学习:advice for applying machine learning | diagnosing bias vs. variance(机器学习:诊断偏差和方差问题)

    当我们运行一个学习算法时,如果这个算法的表现不理想,那么有两种原因导致:要么偏差比较大.要么方差比较大.换句话说,要么是欠拟合.要么是过拟合.那么这两种情况,哪个和偏差有关.哪个和方差有关,或者是不是 ...

  5. C实现读写文件

    https://www.cnblogs.com/zhanghongfeng/p/7726199.html https://www.cnblogs.com/xudong-bupt/p/3478297.h ...

  6. Codeforces Round #523 (Div. 2) C Multiplicity (DP)

    传送门 https://www.cnblogs.com/violet-acmer/p/10005351.html 题意: 给定一数组a[],从a[ ]中除去任意个元素得到b[ ],求能形成多少“好序列 ...

  7. typescript和coffeescript简介

    typescript 1.什么是typescript?和JavaScript有什么关系? 1.它是一门独立的语言,实现了自己的编译器   2.它的目标代码是JavaScript(很多语言的目标代码是机 ...

  8. 关于python类变量和实例变量

    今天在看python的类和实例的时候,突然发现了一个以前遗漏的点,也就是类变量和实例变量.首先需要理解一下类变量和实例变量的概念. 类全局变量:在类中定义,对类和由类生成的实例生效,如果通过方法对类变 ...

  9. Luogu P4197 Peaks

    题目链接 \(Click\) \(Here\) 做法:\(Kruskal\)重构树上跑主席树 构造方法:把每条边拆出来成一个点,点权是原先的边权.每次连边的时候,连的不再是点,而是其原先点所在的联通块 ...

  10. (最小生成树 并查集)P1111 修复公路 洛谷

    题目背景 A地区在地震过后,连接所有村庄的公路都造成了损坏而无法通车.政府派人修复这些公路. 题目描述 给出A地区的村庄数N,和公路数M,公路是双向的.并告诉你每条公路的连着哪两个村庄,并告诉你什么时 ...