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

最新推荐文章于 2025-02-19 20:13:35 发布

原创最新推荐文章于 2025-02-19 20:13:35 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

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

html+css 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍如何使用CSS实现水平和垂直滚动条的隐藏与显示，包括利用flex和overflow属性进行响应式布局调整，以及解决滚动条兼容性问题的方法。

//横向
在父类设置
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;
    }