我试图使嵌套的flexbox子div(child211)在没有可用空间时显示滚动。 Flexbox容器具有预定义的高度。 child211的Flexbox父child2有溢出:隐藏。我不想滚动整个child2。
顺便说一句:我只显示基本结构,因为在我的真实场景中,最后一个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>