Scrollable CSS div with fixed parent element

Question

I am building a mobile application which will have a scrollable element in the middle of the screen. Currently when I try and scroll the entire app moves. I would like the all other elements to remain fixed while my element scrolls.

Here is my main React App:

class MobileServices extends Component {

  render() {
    return (
      <div className={style.app}>
        <div className={style.mobileHeader}>
          <div className={style.logoBox}>
            Logo Here
          </div>
          <div className={style.contactBox}>
          </div>
        </div>
        <div className={style.mainContent}>
          <div className={style.contentOne}></div>
          <div className={style.contentTwo}></div>
          <div className={style.contentThree}></div>
        </div>
      </div>
    );
  }
}

Here is the CSS:

html, body {
    margin: 0;
    /* height: 100% */
}

.app {
    background-color: green;
    background-size : cover;
    background-attachment: fixed;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.contactBox {
    margin: 1rem;
    padding: 1rem;
}

.contentOne {
    background-color: blue;
    display: flex;
    height: 10rem;
    width: 100vw
}
.contentTwo {
    background-color: red;
    display: flex;
    height: 10rem;
    width: 100vw
}

.logoBox {
    border: 2px solid white;
    margin: 1rem;
    padding: 2rem;
}

.mainContent {
    flex: 1;
    display: flex;
    overflow: scroll;
    margin-top: 4rem;
    height: 10rem;
    width: 300vw;
    overflow-x: auto;
}

.mobileHeader {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

I have tried making the app class fixed, but that only prevented me from being able to scroll at all.

Answer 1

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.app {
   // your css and
   display: flex;
   flex-direction: column;
}
.mainContent {
    flex-grow: 1;
    overflow: auto;
    // rest of your css
}

Optional, you can set your mobielHeader to have position: sticky