如何建立一個允許垂直滾動而不指定其高度的彈性容器？
在下面的程式碼片段中，我期望第一個和第二個容器分別佔據視窗高度的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>
