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和自动滚动这样界面就可以滚动了*/
随机推荐
- 洛谷P4070 生成魔咒
题意:给定字符串,求每个前缀的本质不同的子串数量.字符集1e9. 解:在线构造后缀自动机并统计答案. 答案就是∑len[i] - len[fail[i]] 每次增加的时候,至多对三个节点有影响.然而把 ...
- hdu5306 Explosion
题目链接 题意 有n个房间,每个房间里面有若干把钥匙,每把钥匙可以打开对应的一扇门.如果手中没有钥匙,就要随机轰炸一个房间来打开这个房间.如果有钥匙,就要去打开这些房间.问期望轰炸次数是多少. 思路 ...
- 回调函数: 一定要在函数名前加上 CALLBACK,否则有可能引起内存崩溃!
今天又遇到一个莫名其妙的内存崩溃问题,问题代码 EnumChildWindows(...): EnumChildWindows(hwnd_panel_text_watermark, (WNDENUMP ...
- tensor flow中summary用法总结
对于用法的总结详细的参见博文https://www.cnblogs.com/lyc-seu/p/8647792.html
- POJ 2449 Remmarguts' Date (第k短路径)
Remmarguts' Date Time Limit: 4000MS Memory Limit: 65536K Total Submissions:35025 Accepted: 9467 ...
- DB9 ------ 接口定义
下图是母座和公座的接口定义: 特别提醒:以上是公座和母座的接口定义,如果是串口线,RXD就变成TXD,以此类推.
- docker基础之镜像
获取镜像 从 Docker Registry 获取镜像的命令是 docker pull.其命令格式为: docker pull [选项] [Docker Registry地址]<仓库名>: ...
- python 面向对象(一)初识面向对象
##################################总结#################### 1. 面向过程:一切以事物的发展流程为中心 面向对象:一切以对象为中心,一切皆为对向, ...
- jQuery克隆html元素并改变id
如题,前端操作经常需要ajax异步刷新html页面数据.有时候js里面拼接html代码很麻烦. 因此选择一个div克隆并改变一些值就省了很多事.这个div也可以提前写在html里面hide() 下面是 ...
- AJAX工作原理与缺点
1.概念:什么是AJAXAJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.2.为什么要使用他 ...