How can I create a flex container that allows vertical scrolling without specifying its height?

In the snippet below I am expecting the first and the second container to occupy 50% of the window height each, and I want first container body to have vertical overflow.

Unfortunately, when I am putting huge block inside the first container - it is becoming bigger then 50% of the page and auto overflow does not work.

Is there any way to make it possible without specifying 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>

Solution

You must wrap the block content inside a div with overflow-y set to scroll in order to mark the whole block content scroll, else only it's middle part will scroll.

and add overflow-y: auto; to the block itself to set it as 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>