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和自动滚动这样界面就可以滚动了*/
随机推荐
- SRM 600 div 2 T 1
贪心+枚举 #include <bits/stdc++.h> using namespace std; class TheShuttles { public: int getLeast ...
- 团体程序设计天梯赛(CCCC) L3009 长城 方法证明
团体程序设计天梯赛代码.体现代码技巧,比赛技巧. https://github.com/congmingyige/cccc_code
- 斯坦福大学公开课机器学习:machine learning system design | error metrics for skewed classes(偏斜类问题的定义以及针对偏斜类问题的评估度量值:查准率(precision)和召回率(recall))
上篇文章提到了误差分析以及设定误差度量值的重要性.那就是设定某个实数来评估学习算法并衡量它的表现.有了算法的评估和误差度量值,有一件重要的事情要注意,就是使用一个合适的误差度量值,有时会对学习算法造成 ...
- Hibernate 二(一级缓存,多表设计之一对多)
1 对象状态与一级缓存 1.1 状态介绍 l hibernate 规定三种状态:瞬时态.持久态.脱管态 l 状态 瞬时态:transient,session没有缓存对象,数据库也没 ...
- 【非专业前端】vue+element+webpack
先点这里(- ̄▽ ̄)- 环境搭建 默认你已经安装了node.js 下面安装vue和webpack npm install -g @vue/cli npm install -g @vue/cli-ini ...
- xp与win7双系统时删除win7启动菜单
1.提取Win7安装光盘中,boot目录下的[bootsect.exe]到其它盘中,备用! 2 2.启动到WinXP或者WinPE或者Dos中,只要是能执行dos命令的地方就可以 3 3.cmd下进入 ...
- C/S,B/S的应用的区别
C/S和B/S都是软件架构方式: C/S(Client/Server) :客户端/服务器结构,其中客户端和服务器端都是独立的计算机,客户端是面向用户的应用程序或者是接口,服务器端通常采用高性能的PC. ...
- opencv: 线性拟合
opencv提供了fitline函数用于直线拟合,原型为: C++: void fitLine(InputArray points, OutputArray line, int distType, d ...
- 原版js生成银行卡号
function init() { undefined = "undefined"; mkCClist(); } function ccchk(cdi) { document.co ...
- Django REST Framework限速
官方文档:http://www.django-rest-framework.org/api-guide/throttling/#throttling settings.py配置 REST_FRAMEW ...