Two Columns – One Column Overflows & Other Fixed – Shared Scroll

November 10, 2023

I’m working on a React project, but the HTML and CSS are the focus for this question.

I have two columns, each taking 50% of the screen.

I want the right column to have a bunch of cards that you scroll through. The cards will take up more than 100vh so I want the right side to be scrollable.

I want the left column to simply have a centered div with some basic information. The left side should be unaffected by the scrolling behaviour.

The part I need help with is that I want the right side to scroll regardless of where you scroll on the screen. I’m pretty sure this is possible with only HTML & CSS but I’m not sure how to do it.

Any assistance will be appreciated 🙂

// Home.tsx

import styles from './home.module.css';

function Home() {

  return (
    <>
      <div className={styles.container}>
        
        <div className={styles.left}>
          Left
        </div>

        <div className={styles.right}>
          <div className={styles.card}>
            Card
          </div>
          <div className={styles.card}>
            Card
          </div>
          <div className={styles.card}>
            Card
          </div>
          <div className={styles.card}>
            Card
          </div>
          <div className={styles.card}>
            Card
          </div>
        </div>

      </div>
    </>
  )
}

export default Home

// Home.module.css

body {
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh; 
  width: 100vw;
  display: flex;
}

.left, .right {
  flex: 1;
  width: 50%; 
}

.left {
  background-color: rgb(174, 174, 247);
}

.right {
  background-color: rgb(250, 176, 176);
}

.card {
  height: 40vh;
  background-color: rgb(247, 247, 187);
  margin: 8rem 8rem 10px 8rem;
}

>Solution :

Turn your logic around. Do not limit the container height and use overflow. Instead simply limit the height of the left side and make it stick to the viewport:

/* CSS reset */
* {
  box-sizing: border-box;
}

body { 
  margin: 0;
}

/* required CSS */
body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

aside div {
  position: sticky;
  top: 0;
  height: 100vh;
}


/* for demonstration purpose only */
div {
  border: 2px dashed red;
}

main div {
  height: 60vh;
}

<body>
  <aside>
    <div>left side</div>
  </aside>
  <main>
    <div>right side</div>
    <div>right side</div>
    <div>right side</div>
    <div>right side</div>
    <div>right side</div>
    <div>right side</div>
  </main>
</body>