What I want is for 2 components to have their own separate overflow-X scrolling, rather than scrolling the entire container together. I have tried everything and this prop is just enraging me at this point.

This is a React component, so the #root acts as the body.

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  position: relative;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  background: linear-gradient(to bottom, #f1f1f1, #eae6e1);
}

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 100vh;
  position: relative;
}

The #main is the root layout, whereby there is a navbar above it and nothing else. I have tried removing overflow auto from the main, but this causes the navbar to disappear on zoom. Where as this layout works perfectly on the other 4 routes I have made, it is failing on the most basic component I have.

export default function HomePage() {
  return (
    <section
      style={{
              display: 'flex',
        flexDirection: 'column',
                  gap: '1rem',
               margin: '1rem auto',
      }}
    >
      <Photos />
      <Banner />
    </section>
  );
}

The section is purely optional, I added it because I thought maybe wrapping an extra layer around the 2 components might help. But I can get rid of it.

.banner {
  display: flex;
  justify-content: space-between;

  button {
    width: 100px;
    border-color: transparent;
    background-color: transparent;;
    font-size: 4rem;

    svg {
      color: #414345;
    }
  }

  > div {
    height: 200px;
    width: 466px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: #ffffff;
    background: linear-gradient(to right, #232526, #414345);
  }
}

    <section className={css['banner']}>
      <button onClick={() => clickHandler(-1)}>
        <FontAwesomeIcon icon='chevron-left' />
      </button>
      <AnimatePresence>
        <motion.div>
          // placeholder for content 
        </motion.div>
      </AnimatePresence>
      <button onClick={() => clickHandler(1)}>
        <FontAwesomeIcon icon='chevron-right' />
      </button>
    </section>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;

  h1 {
    margin: 0;
    text-wrap: nowrap; 
    text-align: center;
  }

  .row {
    display: flex;
    align-items: center;
    gap: 1rem;

    img {
      width: 225px;
      border-radius: 5px;
    }
  }
}

    <div className={css.container}>
      <div className={css.row}>
        <img src={stock1} alt='stock' />
        <img src={stock2} alt='stock' />
      </div>
      <h1>Title</h1>
      <div className={css.row}>
        <img src={stock3} alt='stock' />
        <img src={stock4} alt='stock' />
      </div>
    </div>

I’ve ran out of things to say. I have tried so many variations that I cannot remember what has happened. I have tried wrapping each component in another div. I have tried tinkering with width/max width, overflow, align items/self center, margin/padding etc.

What is supposed to happen is that the .container/photos component is supposed to be at the horizontal center of the page, with a 1rem margin top and bottom. On zoom you should only need to scroll left and right, and said scroll should only scroll this component, it should not scroll the banner beneath it.

The banner should act the same way in terms of scroll, but it doesn’t need a margin. It can either be a fixed width and float in the center, or it can stretch out to the edges on zoomout, I haven’t decided.

But this is a list of what I am getting which is raging me at this point.

1. the photos will hide in the left hand side of the screen when using align items/self
2. margin not centering
3. margin left/right 1rem not showing, even when explicitly set.
4. finally, both banner/photos will have their own separate scroll, but photos will be missing the 1rem right margin. This is unfixable, I can try adding 1rem padding or margin to any element, and it will be ignored, the right scroll will end at the edge of the element.
5. one time, I added overflow auto to banner, and instead of being a scrollable element, it completely disappeared below the viewport, inaccessible unless you zoom out.

I have managed to get this to work as a single element, where the overflow will scroll photos/banner together, but I really want them to have their own separate X scroll.

The code I have above is the both can scroll version. All my other attempts I have binned and not worth posting due to the amount of failed variations.