在下面的程式碼片段中，我期望第一個和第二個容器分別佔據視窗高度的50%，並且我希望第一個容器主體具有垂直溢出.
不幸的是，當我將巨大的區塊放入第一個容器中時 - 它變得大於頁面的 50%，並且自動溢出不起作用。
有什麼方法可以不指定高度嗎？
* {
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>
您必須將區塊內容包裝在 div 中，並將溢出-y 設定為滾動，以便標記整個區塊內容滾動，否則只有中間部分會滾動。
並將
overflow-y: auto;新增至區塊本身以將其設為捲動。試試這個：
* { 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>