I am attempting to create a nested flexbox child div (child211) that displays a scroll when there is limited space available. The flexbox container has a predetermined height. The flexbox parent of child2 of child211 has overflow: hidden. I do not want the entire child2 to scroll.
By the way: I am only showing a basic structure here, as in my actual situation, the path to the last div is quite lengthy.
Here is an example of the CSS and 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>