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和自动滚动这样界面就可以滚动了*/
随机推荐
- A1138. Postorder Traversal
Suppose that all the keys in a binary tree are distinct positive integers. Given the preorder and in ...
- 【CF1119D】Frets On Fire
题目大意:给定一个长度为 n 的序列,给定一个恒定的 w,求解 \[\sum\limits_{i=1}^{n}min\{d[i],w\}\] 题解:学会了对最小值和式的快速处理. 若在下标的角度考虑, ...
- flutte项目命令行打包
进入自己flutter项目根目录,运行以下命令 flutter build apk #打包安卓 flutter build ios #打包ios 然后会给出一个路径,就是打包完成的apk的位置 bui ...
- java利用线程池处理集合
java利用线程池处理集合 2018年07月23日 17:21:19 衍夏成歌 阅读数:866 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/s ...
- python logging日志模块
一.logging模块的简介 logging模块是Python内置的标准模块,主要用于输出运行日志,可以设置输出日志的等级.日志保存路径.日志文件回滚等:相比print,具备如下优点: 可以通过设置不 ...
- STM32F103 ------ 时钟配置
由于stm32的库默认是外部晶振8M的情况下实现的,所以配置波特率的时候也是按8M,包括主频,如果用12M晶振就需要改动几个地方: 在system_stm32f10x.c中找到相应类型的文件,进行如下 ...
- 字节缓冲流 BufferedOutputStream BufferedInputStream
/*缓冲流:读取数据大量的文件时,读取的速度慢java提供了一套缓冲流 提高io流的效率 * */ package cn.lijun.demo; import java.io.BufferedInpu ...
- Try It Once Again
愿你就是自己最暖的太阳.无需凭借谁的光~~~~~~~~~~~~ ============================== ============================== ====== ...
- python css功能补充讲解
###########总结#### 标签选择器 标签名 id选择器 #box1 类选择器.box2 css高级选择器 *子选择器* 子选择器用 大于号 .box1>.box2{ w ...
- HTML5 accesskey的用法
<button onclick="start()" accesskey="s">开始</button> <button oncli ...