chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

时间:2023-02-19 22:37:01
 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%无法充满父元素的更多相关文章

  1. 如何让 height&colon;100&percnt;&semi; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

  2. chrome 49 版本 跨越 --args --disable-web-security --user-data-dir

    转载: 做前端的,用Ajax获取数据,是常有的事情,同域下自然没问题了,如果是不同域获取数据,浏览器就有个同源策略的限制. 如图: Origin * is not allowed by Access- ...

  3. 解决:子元素设置margin-top,父元素也受影响的问题

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...

  4. 设置height&colon;100&percnt;无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  5. table和div设置height&colon;100&percnt;无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  6. 解决子元素设置margin-top,效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  7. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  9. 为什么子元素设置margin-top会作用在父元素上?

    原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

随机推荐

  1. Java正则表达式中的捕获组的概念及相关API使用

    要弄清这三个方法,首先要弄清Java正则表达式中的捕获组的概念.捕获组也就是Pattern中以括号对“()”分割出的子Pattern.至于为什么要用捕获组呢,主要是为了能找出在一次匹配中你更关心的部分 ...

  2. 用jquery可以用使用serialize&lpar;&rpar;序列化表单值,那有没有什么方法可以将值填充到表单中呢? (一段不错的代码)

    serialize()的作用,是生成一个类似这种格式的字符串用于ajax提交 a=&b=&c=.你想将值填写到表单,首先要有值,然后就是表单控件的id或者能唯一定位控件的属性.然后就$ ...

  3. Windows&sol;Linux用户态监控进程启动事件方法

    catalogue . windows wmi监控进程启动 . linux netlink监控进程启动 1. windows wmi监控进程启动 from threading import Threa ...

  4. hive 元数据库表描述

    元数据库表描述 这一节描述hive元数据库中比较重要的一些表的作用,随着后续对hive的使用逐渐补充更多的内容. mysql元数据库hive中的表: 表名 作用 BUCKETING_COLS 存储bu ...

  5. B&period; Math

    链接 [http://codeforces.com/contest/1062/problem/B] 题意 给你n,有两种操作要么乘以某个数,要么开根但必须开根后是整数才能开,问你最后能变成最小的数是多 ...

  6. Linux内核分析——进程的切换和系统的一般执行过程

    进程的切换和系统的一般执行过程 一.进程切换的关键代码switch_to分析 (一)进程调度与进程调度的时机分析 1.不同类型的进程有不同的调度需求 第一种分类: (1)I/O-bound:频繁进行I ...

  7. mysql常用语句练习-基于ecshop2&period;7&period;3数据库&lpar;1&rpar;

    SELECT * FROM ecs_goods WHERE goods_id = 1;SELECT goods_id, goods_name FROM ecs_goods WHERE goods_id ...

  8. 不要以为字段以transient修饰的话就一定不会被序列化

    1: 先阅读这边文章:http://www.importnew.com/21517.html 2:被transient修饰真的会被序列化吗? 反例:java.util.ArrayList中底层存储数组 ...

  9. &period;net 调用API并解析Json数据方法

    using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using Syst ...

  10. 【Unity笔记】获得鼠标点击屏幕的位置,并转成世界坐标

    Vector3 pos = Camera.main.ScreenToWorldPoint(Input.mousePosition);