具有固定父元素的可滾動 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 設置為 position:sticky