当子容器内容超出父容器内容时子容器可以进行滚动

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/hu_Time/article/details/100894470

//横向
在父类设置
display: flex;
overflow-x: auto;
overflow-y: hidden;

在子类设置
flex-shrink: 0;


//纵向
css3新特性-webkit-scrollbar ，兼容性差点儿，简单
 overflow-x: hidden;
 overflow-y: scroll;

//兼容性高，复杂
   /* 父容器设置宽度, 并超出部分不显示 */
        overflow: hidden;
    #box > div {
        /* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
        overflow-y: scroll;
    }