我正在尝试使嵌套的弹性框子div(child211(在没有可用空间时显示滚动。弹性框容器具有预定义的高度。子项 211 的弹性框父项 2 已溢出:隐藏。我不想滚动整个孩子2。
顺便说一句:我只展示了基本结构,因为在我的真实场景中,通往最后一个div 的路径真的很长。
示例 CSS 和 HTML 如下所示:
.container {
display: flex;
flex-direction: column;
background-color: yellow;
height: 380px;
}
.child {
font-size: 100px;
color: white;
}
.child1 {
font-size: 50px;
background: red;
}
.child2 {
height: 100%;
background-color: green;
flex: 1;
min-height: 0;
overflow: hidden;
}
.child21 {
background-color: rgb(20, 255, 0);
}
.child211 {
background-color: rgb(200, 255, 0);
overflow: auto;
}
.child3 {
font-size: 50px;
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="child1 child">
DIV1
</div>
<div class="child2 child">
DIV2
<div class="child21 child">
DIV21
<div class="child211 child">
DIV211
</div>
</div>
</div>
<div class="child3 child">
DIV3
</div>
</div>
</body>
</html>
child2
设为具有列方向的 flex 容器,只需在嵌套的子元素上添加overflow:auto
:
.container {
display: flex;
flex-direction: column;
background-color: yellow;
height: 380px;
}
.child {
font-size: 100px;
color: white;
}
.child1 {
font-size: 50px;
background: red;
}
.child2 {
height: 100%;
background-color: green;
flex: 1;
min-height: 0;
overflow: hidden;
display:flex;
flex-direction:column;
}
.child21 {
background-color: rgb(20, 255, 0);
overflow:auto;
}
.child211 {
background-color: rgb(200, 255, 0);
overflow: auto;
}
.child3 {
font-size: 50px;
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="child1 child">
DIV1
</div>
<div class="child2 child">
DIV2
<div class="child21 child">
DIV21
<div class="child211 child">
DIV211
</div>
</div>
</div>
<div class="child3 child">
DIV3
</div>
</div>
</body>
</html>
如果您想在内部水平上滚动,您可以继续嵌套 flex 容器。
.container {
display: flex;
flex-direction: column;
background-color: yellow;
height: 380px;
}
.child {
font-size: 100px;
color: white;
}
.child1 {
font-size: 50px;
background: red;
}
.child2 {
height: 100%;
background-color: green;
flex: 1;
min-height: 0;
overflow: hidden;
display:flex;
flex-direction:column;
}
.child21 {
background-color: rgb(20, 255, 0);
overflow:auto;
display:flex;
flex-direction:column;
}
.child211 {
background-color: rgb(200, 255, 0);
overflow: auto;
}
.child3 {
font-size: 50px;
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="child1 child">
DIV1
</div>
<div class="child2 child">
DIV2
<div class="child21 child">
DIV21
<div class="child211 child">
DIV211
</div>
</div>
</div>
<div class="child3 child">
DIV3
</div>
</div>
</body>
</html>