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 ...
随机推荐
- Spark Shuffle(三)Executor是如何fetch shuffle的数据文件(转载)
1. 前言 在前面的博客中讨论了Executor, Driver之间如何汇报Executor生成的Shuffle的数据文件,以及Executor获取到Shuffle的数据文件的分布,那么Executo ...
- [py][lc]python的纸牌知识点
模块collections-collections.namedtuple表示tuple 如表示一个坐标, t = (1,2), 搞不清楚. 如果这样就对了Point(x=1, y=2) from co ...
- weiwo.wxmmd.com将您重定向的次数过多。尝试清除 Cookie.
折腾了很久,最后更换PHP版本解决了,我的项目用的tp3.1.2,出现上图问题时的php版本是7.1,换回5.6就没有这个问题.希望能为大家提供一个思路.
- telnet到RedHat Linux失败--解决办法
失败原因: 1.telnet包未安装,检查telnet包是否安装: [root@vm-rhel root]# rpm -qa telnet telnet-0.17-25 表示已安装 2.telnet包 ...
- Android初体验之Monkey和MonkeyRunner
原文地址https://blog.csdn.net/mad1989/article/details/38087737 Monkey 什么是Monkey Monkey是Android中的一个命令行工具, ...
- 内存记号(Memory Trail)[自定义的名字] --调试方法
即使你把输出导向到文件中,运转记录花费的时间所带来的冲击,仍然足够改变程序的执行结果.如果要改善这种情况,我必须回到一个我所谓的“Memory Trails”(内存记号)的低阶技术中.为了使用 mem ...
- BUG克星:几款优秀的BUG跟踪管理软件
Bug管理是指对开发,测试,设计等过程中一系列活动过程中出现的bug问题给予纪录.审查.跟踪.分配.修改.验证.关闭.整理.分析.汇总以及删除等一系列活动状态的管理.,最后出相应图表统计,email通 ...
- awk处理excel表格数据
拿到一个ip的excel表格,要对单元格中的ip进行扫描,一看有点乱,有空格分割的,有"/"分割的,有带括号(分割的,有好几百个: 要把左边的变为右边的格式,用excel自带的功能 ...
- Vim 操作命令不完全汇总
.命令:"重复上次修改": x命令:删除光标下的字符: u命令:撤销上次修改: dd命令:删除整行: >G命令:增加从当前行到文档末尾处的层级缩进: $命令:把光标移至行尾: ...
- Nginx负载均衡之健康检查
负载均衡实例 http{ upstream myserver { server 10.10.10.1 weight=3 max_fails=3 fail_timeout=20s; server 10. ...