Scrollable blocks in static one

I have a static non-scrollable landing page and to scrollable cards in it. I add property overflow: hidden; to parent and overflow: scroll; to child, but these blocks still don't moving. Maybe you know where am I wrong?

I want to .child blocks be scrollable while .parent block is static.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.parent {
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 50px;
  width: 100%;
  height: calc(100% - 50px);
}
.child {
  overflow: scroll
}

<!-- language: lang-html -->

<div class="parent">
  <div class="child">
    *content*
  </div>
  
  <div class="child">
    *content*
  </div>
</div>

<!-- end snippet -->

You are going to the right direction. Just set a specific height to the child and put content so that you can scroll.

.child {
    overflow: scroll;
    height: 100px; 
    /*Put any fixed height you want and put content where it is written "*content*" */
}