zoukankan      html  css  js  c++  java
  • chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素


    1
    <div class="container"> 2 <div class="item"> 3 <div class="item-inner"> 4 <a> 5 Botón 6 </a> 7 </div> 8 </div> 9 10 <div class="item"> 11 <div class="item-inner"> 12 <a> 13 Botón 14 </a> 15 </div> 16 </div> 17 18 <div class="item"> 19 <div class="item-inner"> 20 <a> 21 Botón 22 </a> 23 </div> 24 </div> 25 </div>
     1 .container {
     2   height: 20em;    
     3   display: flex;
     4   flex-direction: column;
     5   border: 5px solid black
     6 }
     7 
     8 .item {
     9     flex: 1;
    10     border-bottom: 1px solid white;
    11 }
    12 
    13 .item-inner {
    14     height: 100%;
    15     width: 100%;
    16     display: table;
    17     
    18 }
    19 
    20 a {
    21     background: orange;
    22     display: table-cell;
    23     vertical-align: middle;
    24     
    25 }

    代码如上,可以看到, 在chrome49版本中, item-inner设置的height:100%, 无法充满父元素flex: 1撑满的高度

    link: http://jsfiddle.net/y8mboo2s/

  • 相关阅读:
    Chap5:操作文件和目录[The Linux Command Line]
    ABC3
    ABC2
    ABC
    Spring MVC / Boot
    Usefull Resources
    [ Learning ] Design Pattens
    [ Learning ] Spring Resources
    URL Resources
    [ Windows BAT Script ] BAT 脚本获取windows权限
  • 原文地址:https://www.cnblogs.com/ZengYunChun/p/9729489.html
Copyright © 2011-2022 走看看