chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素
1 <div class="container">
<div class="item">
<div class="item-inner">
<a>
Botón
</a>
</div>
</div> <div class="item">
<div class="item-inner">
<a>
Botón
</a>
</div>
</div> <div class="item">
<div class="item-inner">
<a>
Botón
</a>
</div>
</div>
</div>
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
} .item {
flex:;
border-bottom: 1px solid white;
} .item-inner {
height: 100%;
width: 100%;
display: table; } a {
background: orange;
display: table-cell;
vertical-align: middle; }
代码如上,可以看到, 在chrome49版本中, item-inner设置的height:100%, 无法充满父元素flex: 1撑满的高度
link: http://jsfiddle.net/y8mboo2s/
chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素的更多相关文章
- 如何让 height:100%; 起作用---父级元素必须设定高度
参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...
- chrome 49 版本 跨越 --args --disable-web-security --user-data-dir
转载: 做前端的,用Ajax获取数据,是常有的事情,同域下自然没问题了,如果是不同域获取数据,浏览器就有个同源策略的限制. 如图: Origin * is not allowed by Access- ...
- 解决:子元素设置margin-top,父元素也受影响的问题
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...
- 设置height:100%无效的解决方法
设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...
- table和div设置height:100%无效的完美解决方法
刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...
- 解决子元素设置margin-top,效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- 为什么子元素设置margin-top会作用在父元素上?
原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
随机推荐
- centos 正则,grep,egrep,流式编辑器 sed,awk -F 多个分隔符 通配符 特殊符号. * + ? 总结 问加星 cat -n nl 输出文件内容并加上行号 alias放~/.bash_profile 2015-4-10 第十三节课
centos 正则,grep,egrep,流式编辑器 sed,awk -F 多个分隔符 通配符 特殊符号. * + ? 总结 问加星 cat -n nl 输出文件内容并加上行号 alias放~ ...
- Java调用Python脚本并获取返回值
在Java程序中有时需要调用Python的程序,这时可以使用一般的PyFunction来调用python的函数并获得返回值,但是采用这种方法有可能出现一些莫名其妙的错误,比如ImportError.在 ...
- android唯一设备标识、设备号、设备ID的获取方法
##如何获取Android设备唯一ID? ###问题 每一个android设备都有唯一ID吗?如果有?怎么用java最简单取得呢? ###回答1(最佳) 如何取得android唯一码? 好处: 1.不 ...
- (转)nginx负载均衡(5种方式)、rewrite重写规则及多server反代配置梳理
Nginx除了可以用作web服务器外,他还可以用来做高性能的反向代理服务器,它能提供稳定高效的负载均衡解决方案.nginx可以用轮询.IP哈希.URL哈希等方式调度后端服务器,同时也能提供健康检查功能 ...
- spark 调优概述
分为几个部分: 开发调优.资源调优.数据倾斜调优.shuffle调优 开发调优: 主要包括这几个方面 RDD lineage设计.算子的合理使用.特殊操作的优化等 避免创建重复的RDD,尽可能复用同一 ...
- mutex锁住共用线程函数 造成了死锁 ,为什么?
锁住共用的线程函数,为什么出现了死锁的现象,是真的死锁了吗?为什么勒[清晰早点] [逍遥游]# 一般都是用 EnterCriticalSection 和 LeaveCriticalSection 锁住 ...
- (9)SpriteFrameCache和TextureCache
简介 SpriteFrameCache 主要服务于多张碎图合并出来的纹理图片.这种纹理在一张大图中包含了多张小图,直接通过TextureCache引用会有诸多不便,因而衍生出来精灵框帧的处理方式,即把 ...
- [翻译] Rails::Railtie
原文:http://api.rubyonrails.org/classes/Rails/Railtie.html Railtie 是 Rails 框架的核心,提供几个钩子来扩展或修改 Rails 的 ...
- Python 中的多维字典
Python中的dict可以实现迅速查找.那么有没有像数组有二维数组一样,有二维的字典呢?比如我需要对两个关键词进行查找的时候.2D dict 可以通过 dict_2d = {'a': {'a': 1 ...
- P1136 迎接仪式
P1136 迎接仪式 $O(n^{2}k)$:$f[i][k]$表示到第$i$个字符为止,交换$k$次,得到的最多子串数 那么枚举位置$j$,状态可以从$f[j][k-1]+1$转移过来 $O(nk^ ...