flex: 1导致子元素超出父元素

Starry...

于 2024-08-02 11:20:03 发布

阅读量265

点赞数 5

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_31247149/article/details/140867668

版权

<style>
    .box {
        width: 900px;
        height: 500px;
        background-color: #cecece;
    }
    .head {
        div {
            height: 100px;
        }
    }
    .bottom {

    }
    .table {
        overflow: scroll;
        .item {
            height: 150px;
        }
    }

</style>
<body>
<div class="box">
    <div class="head"><div>标题</div></div>
    <div class="bottom">
        <div class="table">
            <div class="item"> 行数据 </div>
            <div class="item"> 行数据 </div>
            <div class="item"> 行数据 </div>
            <div class="item"> 行数据 </div>
        </div>
    </div>
</div>
</body>

这是当前html代码页面显示如下现在想使table内容在父元素内滚动

 .box {
        width: 900px;
        height: 500px;
        background-color: #cecece;
        display: flex;
        flex-direction: column;
    }
    .head {
        div {
            height: 100px;
        }
    }
    .bottom {
        flex: 1;
    }
    .table {
        overflow: scroll;
        .item {
            height: 150px;
        }
    }

发现并没有效果，加上

overflow:hidden

即可

        flex: 1 和 overflow: hidden 结合使用可以有效地控制子元素不会超出其父元素的范围，原因在于它们各自的作用机制以及如何相互配合。
flex: 1 的作用
        当一个子元素的 flex 属性设置为 1，它意味着这个元素将尝试填充其所在容器的可用空间。在 Flexbox 布局中，这通常是指在主轴（main axis）上的空间分配。如果容器的大小固定，flex: 1 的元素会根据容器的大小伸缩自己的尺寸。
overflow: hidden 的作用
        overflow: hidden 属性则告诉浏览器，如果一个元素的内容超出了该元素的边界，浏览器应该裁剪掉超出部分的内容，而不是让内容溢出到父元素之外。这意味着任何超出元素边框的内容都将不可见。
结合使用的效果
        当你在一个容器上同时使用 flex: 1 和 overflow: hidden 时，会发生以下情况：
尺寸调整:
        子元素尝试使用 flex: 1 来扩展并填充其父容器的可用空间。
内容裁剪:
        即使子元素的内容试图超出其定义的边界，overflow: hidden 也会阻止这部分内容显示出来，从而确保整个容器的外观整洁，没有溢出的内容。
        因此，即使 flex: 1 的子元素内部的内容比预期的要多，overflow: hidden 也会确保这些额外的内容不会导致视觉上的混乱或破坏布局结构。

Starry...

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
flex: 1导致子元素超出父元素

overflow: hidden 属性则告诉浏览器，如果一个元素的内容超出了该元素的边界，浏览器应该裁剪掉超出部分的内容，而不是让内容溢出到父元素之外。这意味着任何超出元素边框的内容都将不可见。因此，即使 flex: 1 的子元素内部的内容比预期的要多，overflow: hidden 也会确保这些额外的内容不会导致视觉上的混乱或破坏布局结构。即使子元素的内容试图超出其定义的边界，overflow: hidden 也会阻止这部分内容显示出来，从而确保整个容器的外观整洁，没有溢出的内容。
复制链接

扫一扫