Прокручиваемый CSS div с фиксированным родительским элементом

Question

Я создаю мобильное приложение с прокручиваемым элементом в середине экрана. В настоящее время, когда я пытаюсь прокрутить все ходы приложения. Я хотел бы, чтобы все остальные элементы оставались фиксированными, пока мои элементы прокручиваются.

Вот мое основное приложение React:

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>
    );
  }
}

Вот 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%;
}

Я попытался исправить класс app, но это только лишило меня возможности прокручивать вообще.

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
}

Дополнительно, вы можете установить свой mobielHeader в положение: sticky