在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  UI  HTML/ flex-item與overflow-x/y兼容問題

flex-item與overflow-x/y兼容問題

問題描述

flex-item（父元素flex定位，flex-item指其子元素）設(shè)置overflow-x: visible; overflow-y: auto后，x軸超出容器部分不被顯示。這顯然是不符合overflow的設(shè)定的，故想知道現(xiàn)象下的原因~

問題進(jìn)階

后經(jīng)測試發(fā)現(xiàn)，flex-item只要任一軸設(shè)置過overflow值為非visible，則都會(huì)阻止超出容器的內(nèi)容顯示。故或許這是flex-item對(duì)overflow-x/y不支持，所以其只會(huì)生效其中一個(gè)值等~

測試?yán)?/a>

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="overflow對(duì)flex-item的影響">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class='container'>
    <div class="menu-c">
      <div class="test"></div>
    </div>    
    <div class="main-c"></div>
  </div>
  </div>
</body>
</html>
  .container
  display flex
  height 200px
  .menu-c
    position relative
    flex-shrink 0
    width 40px
    background yellow
    /* display inline-block */
    /* overflow visible */
    overflow-y auto 
    overflow-x visible
    .test
      width 200px
      position absolute
      top 20px
      left 10px
      height 30px
      background black   

  .main-c
    flex 1 1 auto
    background blue
看例子需梯子，故代碼加上
display inline-block是測試是否為bfc特性影響
回答
編輯回答
夢若殤

clipboard.png

clipboard.png

同樓上所述，這是我在chrome里看到的（后者是計(jì)算后的屬性）

2017年5月20日 05:28
編輯回答
笨笨噠

你的代碼跟flex沒有關(guān)系
應(yīng)該說是設(shè)置 overflow-y之后會(huì)影響x軸 同理overflow-x也會(huì)y軸
demo
css_overflow-x
css_overflow-y

2017年12月6日 17:52