Scroll Section Independent

Issue

Disclaimer: First react project, I'm building a photography portfolio and I figure the most difficult part would be the actual gallery of images.

I'm trying to make a section with several children that has a collection of photos. I want each section to scroll horizontally independently but everything I have tried causes the whole section to scroll. I'm sure its something simple because I've done projects before with similar functionality but that was only when I was using HTML, JS, CSS.

Gallery Component

import React, { useEffect, useState } from 'react'
import Styles from './styles'

const Photo = (props) => {

    return (
        <div id={props.id + '_container'} style={Styles.PhotoContStyle}>
            <img id={props.id} src={props.url} style={Styles.PhotoStyle} />
        </div>
    )
}

const AlbumArr = (props) => {
    const [ImgArr, setImgArr] = useState()

    useEffect(() => {
        setImgArr(props.album.urlArr
            .filter(img => img.url.includes('.jpg'))
            .map(({ url, name }) => {
                let urlModified = url.replace('.jpg', '.webp').slice(0, 46) + 'w_720/' + url.replace('.jpg', '.webp').slice(46)
                return <Photo key={name} url={urlModified} id={name + '_Photo'} />
            }))
    }, [])

    return (
        <div
            id={'AlbumArr_' + props.album.albumName}
            style={Styles.AlbumArrStyle}>
            {ImgArr}
        </div>
    )
}

const Gallery = (props) => {
    const [Albums, setAlbums] = useState([])

    useEffect(() => {
        fetch('http://localhost:3000/photos/')
            .then(res => res.json())
            .then(data => {
                setAlbums(data)
            }).catch((err) => console.log(err))
    }, [])

    return (
        <div id='Gallery' style={Styles.GalleryStyle}>
            {Albums.map((album) => { return <AlbumArr album={album} key={album.albumName} /> })}
        </div>
    )
}

export default Gallery

CSS

const Styles = {
    ContStyle: {
        width: '100vw',
        height: 'inherit',
    },

    GalleryStyle: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        width: '100vw',
        height: '100%',
    },

    AlbumArrStyle: {
        display: 'flex',
        flexDirection: 'row',
        width: 'max-content',
        height: '75vh',
        margin: '8px',
    },

    PhotoContStyle: {
        height: '100%',
        width: 'max-content',
        margin: '0 8px',
        overflow: 'clip',
        borderRadius: '8px',
        zIndex: '-1',
    },

    PhotoStyle: {
        height: '100%',
        width: 'auto',
    },
}

export default Styles

Solution

Yup, it was something super simple. Just add a width property to the album style

    AlbumArrStyle{
        display: 'flex',
        flexDirection: 'row',
        width: 'max-content',
        height: '75vh',
        width: '100vw', //Added this line
        margin: '8px',
    }

Answered By - Ericmyerdev