关于overflow-x失效的探讨

最近开发微信小程序遇到个问题：overflow-x无效。。。无论怎样设置子元素的浮动样式，都没有效果，简直无敌了！感觉像是学习了假的css。

HTML如下：

<view class="video-tabBar">
    <view class="changeTab">
        <text class="selected">WEB前端</text>
        <text>JAVA</text>
        <text>PHP</text>
        <text>Python</text>
        <text>Node.Js</text>
    </view>
    <view class="select">
        <text class="iconfont icon-down"></text>
    </view>
</view>

CSS如下：

.video-tabBar {
    background-color: #fff;
    display: flex;
    width: 100%;
    view {
      display: block;
      overflow-x: scroll;
      width: 80%;
      text {
        display: inline-block;
        padding: ~"30rpx";
      }
    }
    & > view:last-child {
      width: 20%;
      text-align: right;
    }
}

最后始终不能横向滚动！Why？巴拉巴拉百度一堆最后找到问题，如果子容器作为一个div，那么子容器的宽度

必须大于父容器的宽度父容器才会横向滚动那么就简单了

<view class="video-tabBar">
    <view class="changeTab">
      <view>
        <text class="selected">WEB前端</text>
        <text>JAVA</text>
        <text>PHP</text>
        <text>Python</text>
        <text>Node.Js</text>
      </view>
      <!--<text></text>-->
    </view>
    <view class="select">
      <text class="iconfont icon-down"></text>
    </view>
 </view>

那么给所有子容器增加个父容器，然后设置父容器的宽度大于祖父容器问题就解决了

.video-tabBar {
      background-color: #fff;
      display: flex;
      width: 100%;
      view {
        display: block;
        overflow-x: scroll;
        width: 80%;
        text {
          display: inline-block;
          padding: ~"30rpx";
        }
        view {
          display: flex;
          overflow: auto;
          width: ~"1000rpx";
          text {
            width: ~"200rpx";
            text-align: center;
          }
          .selected {
            position: relative;
          }
          .selected::after {
            content: "";
            position: absolute;
            top: 95%;
            left: 25%;
            height: 5%;
            width: 50%;
            background-color: #339966;
          }
        }
      }
      & > view:last-child {
        width: 20%;
        text-align: right;
      }
    }

最终解决了问题可能有人会子容器元素不固定怎么办？个人建议：js控制。

关于overflow-x失效的探讨

猜你喜欢