flex布局之下使用overflow失效解决方案

最新推荐文章于 2024-06-26 09:58:38 发布

Er ist träumer.

最新推荐文章于 2024-06-26 09:58:38 发布

阅读量2.7k

点赞数

分类专栏： css学习

本文链接：https://blog.csdn.net/Kobeloveu/article/details/119884024

版权

css学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求点：要求展示区域的盒子高度不能超出父盒子，超出部分滚动展示

问题：页面布局使用的是flex布局，使用overflow：auto，当高度超出父盒子时，出现滚动条。可是视或不生效。

解决效果展示
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./01.css">
    <title>zdymb</title>
</head>
<body>
    <div class="layout">
        <div class="header">头部</div>
        <div class="content">
            <div class="content-left">内-左</div>
            <div class="content-right">
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>
                <p>123</p>

            </div>
        </div>
        <div class="footer">底部</div>
    </div>
</body>
</html>

html,body,.layout{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.layout{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .header{
        width: 100%;
        height: 50px;
        color: #fff;
        background-color: black;
    }
    .content{
        flex: 1 1 0;
        height:100%;
        display: flex;
        overflow: auto;
        .content-left{
           width: 100px;
           background-color: yellow;
        }
        .content-right{
            flex: 1;
            height: 100%;
            overflow: auto;
            background-color: red;
        }
    }
    .footer{
        width: 100%;
        height: 150px;
        background-color: #ccc;
    }
}

// flex 的3个属性
flex：flex-grow flex-shrink flex-basis；
flex-grow：flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。
flex-shrink：flex-grow属性是处理flex元素在主轴上增加空间的问题，相反flex-shrink属性是处理flex元素收缩的问题。如果我们的容器中没有足够排列flex元素的空间，那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制flex元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。
flex-basis： flex-basis 定义了该元素的空间大小（the size of that item in terms of the space），flex容器里除了元素所占的空间以外的富余空间就是可用空间 available space。 该属性的默认值是 auto 。

所以： flex-basis是控制盒子的大小的，设置为0 ,设置高度

Er ist träumer.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
flex布局之下使用overflow失效解决方案

需求点：要求展示区域的盒子高度不能超出父盒子，超出部分滚动展示问题：页面布局使用的是flex布局，使用overflow：auto，当高度超出父盒子时，出现滚动条。可是视或不生效。解决效果展示代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
复制链接

扫一扫

专栏目录