如何创建一个允许垂直滚动而不指定其高度的弹性容器？-PHP中文网问答

在下面的代码片段中，我期望第一个和第二个容器分别占据窗口高度的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>

* { 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>