<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 也会确保这些额外的内容不会导致视觉上的混乱或破坏布局结构。