In the code snippet below, I expect the first and second containers to each occupy 50% of the window height, and I want the first container body to have vertical overflow.
Unfortunately when I put the huge chunk into the first container - it becomes larger than 50% of the page and the auto-overflow doesn't work.
Is there any way to not specify the height?
* {
margin: 0;
box-sizing: border-box;
}
.root {
height: 100vh;
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
.first-block,
.second-block {
flex: 1;
background-color: aqua;
border: 1px solid gray;
display: flex;
flex-direction: column;
}
.first-block-header {
height: 100px;
background-color: yellow;
}
.first-block-footer {
height: 100px;
background-color: coral;
}
.first-block-body {
flex: 1;
overflow: auto;
padding: 16px;
}
.first-block-content {
height: 700px;
width: 50px;
background-color: purple;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Problem with overflow</title>
</head>
<body>
<div class="root">
<div class="first-block">
<div class="first-block-header"></div>
<div class="first-block-body">
<div class="first-block-content"></div>
</div>
<div class="first-block-footer"></div>
</div>
<div class="second-block">
</div>
</div>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You have to wrap the block content in a div and set overflow-y to scroll in order to mark the entire block content as scrolling, otherwise only the middle part will scroll.
And add
overflow-y: auto;to the block itself to set it to scroll.Try this:
* { margin: 0; box-sizing: border-box; } .root { height: 100vh; display: flex; flex-direction: column; gap: 16px; padding: 16px; } .block-content-wrapper { overflow-y: scroll; } .first-block, .second-block { flex: 1; background-color: aqua; border: 1px solid gray; display: flex; flex-direction: column; overflow-y: auto; } .first-block-header { height: 100px; background-color: yellow; } .first-block-footer { height: 100px; background-color: coral; } .first-block-body { flex: 1; overflow: auto; padding: 16px; } .first-block-content { height: 700px; width: 50px; background-color: purple; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Problem with overflow</title> </head> <body> <div class="root"> <div class="first-block"> <div class="block-contant-wrapper"> <div class="first-block-header"></div> <div class="first-block-body"> <div class="first-block-content"></div> </div> <div class="first-block-footer"></div> </div> </div> <div class="second-block"> </div> </div> </body> </html>