Height 100% won't work on child div if having extra wrapper div, why?

Question

I have a simple wrapper div and a scrollable container that looks like this:

// adding dummy text
const div = document.querySelector('.scroll-container')

for(let i = 0; i <= 100; i++) {
  const p = document.createElement('p')
  p.innerText = 'test'
  div.appendChild(p)
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  height: 100vh;
  padding: 16px 0;
  display: grid;
  place-items: center;
}

.scroll-container {
  border: 1px solid red;
  width: 300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

<div class="wrapper">
  <div class="scroll-container"></div>
</div>

Everything is great so far.

However, when I add an extra-wrapper to my scrollable container, my scrollable container no longer scrollable, why is this happening?

// adding dummy text
const div = document.querySelector('.scroll-container')

for(let i = 0; i <= 100; i++) {
  const p = document.createElement('p')
  p.innerText = 'test'
  div.appendChild(p)
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  height: 100vh;
  padding: 16px 0;
  display: grid;
  place-items: center;
}

.scroll-container {
  border: 1px solid red;
  width: 300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* newly added */
.extra-wrapper {
  height: 100%;
}

<div class="wrapper">
  <div class="extra-wrapper"> <!--  newly added!    -->
    <div class="scroll-container"></div>
  </div>
</div>

My extra-wrapper also sets height: 100%;, but still not working.

Why is this happening?