flex-item与overflow-x/y兼容问题

发布于 2022-09-07 08:23:03 字数 1423 浏览 14 评论 0

问题描述

flex-item（父元素flex定位，flex-item指其子元素）设置overflow-x: visible; overflow-y: auto后，x轴超出容器部分不被显示。这显然是不符合overflow的设定的，故想知道现象下的原因~

问题进阶

后经测试发现，flex-item只要任一轴设置过overflow值为非visible，则都会阻止超出容器的内容显示。故或许这是flex-item对overflow-x/y不支持，所以其只会生效其中一个值等~

测试例子

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="overflow对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