Tailwind scrollable component-CodePudding

I want to build the page like in this: what I want to achieve

There is a simple home page with navbar and splitted screen. What I want to achieve is to have no possibility to scroll this page as normally. I want to have possibility to scroll these two sites independently. There is a list of components on left side and scrolling it works. But on the right side, there is a single component that I want to scroll inside. Here is the picture how it looks now, with my code: how it looks now

And here is my tailwind and react code.

App.tsx

function App() {
    return (
        <div className='App'>
            <Navbar/>
            <HomePage/>
        </div>
    );
}

Home.tsx

function HomePage() {
    return (
        <div className='flex bg-primary-grey h-screen'>
            <div className='w-1/2 h-full max-h-screen p-5 overflow-y-auto scrollbar-thin scrollbar-thumb-primary-blue'>
                <ul>
                    {
                        items.map((item) => {
                            return (
                                <Item item={item}/>
                            )
                        })
                    }
                </ul>
            </div>
            <div className='p-5 w-1/2 max-h-screen'>
                <RightComponent/>
            </div>

        </div>
    );
}

RightComponent.tsx

    function RightComponent() {
    
        return (
            <div className='bg-white rounded-md p-5 shadow overflow-y-auto'>
          
            <div className='rounded-md shadow text-center p-5 mt-10'>
                <p className='text-lg font-bold text-left mb-3'>Items</p>
                <ul className='flex mt-1'>
                    {
                        exampleItems.map((name) => {
                            return (
                                <ExampleItem name={name}/>
                            )
                        })
                    }
                </ul>
            </div>
            <div className='rounded-md shadow text-center p-5 mt-10'>
                <p className='text-lg font-bold text-left mb-3'>Description</p>
                <p className='text-left'>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies odio ex, at malesuada velit viverra vel. Aenean efficitur facilisis ipsum sit amet luctus. Aliquam egestas nunc diam, a efficitur eros sodales sit amet. Morbi volutpat vitae purus semper dapibus. Suspendisse tempus commodo risus. Duis eu lacus ipsum. Maecenas interdum quam in orci posuere dictum. Donec posuere nisi at vulputate fringilla.

Mauris laoreet suscipit ipsum non commodo. Nullam maximus nibh sapien, et cursus purus dapibus nec. Praesent consectetur tincidunt pulvinar. Duis pellentesque neque et sem aliquam, id sagittis ex pellentesque. Nulla suscipit tincidunt suscipit. Quisque leo nibh, lacinia sed purus et, finibus iaculis nulla. Phasellus eu maximus quam, et egestas lacus.
                </p>
            </div>
            </div>
        );
    }

Nav.tsx

function Navbar() {
    return (
        <nav className='bg-primary-grey border-b border-secondary-grey'>
            <div className='max-w-7xl mx-auto px-4'>
                <div className='flex justify-between'>
  <div className='flex'>
                    <div>
                        <a href='#' className='flex items-center py-5 px-2'>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                 stroke-width="1.5" stroke="currentColor" className="w-6 h-6 mr-1 text-primary-blue text-3xl">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
                            </svg>
                            <span className='font-bold text-3xl text-blue'>App</span>
                        </a>
                    </div>
                </div>

                <div className='flex items-center justify-center'>
                    <form action="">
                        <div className='relative'>
                            <input type="text"
                                   className='bg-white rounded-full py-3 px-4 w-96 border border-secondary-grey
                                   hover:border-primary-blue
                                   focus:border-primary-blue
                                   focus:outline-0'
                                   placeholder='Keyword'/>

                            <span className='absolute inset-y-0 right-0 flex items-center pr-2'>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                 stroke-width="1.5" stroke="currentColor" className="w-6 h-6">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
                            </svg>
                            </span>
                        </div>
                    </form>
                </div>

                <div className='flex items-center space-x-3'>
                        <a href='#' className='py-2 px-6 border border-solid border-primary-blue text-primary-blue rounded-full'>Publish</a>
                        <a href='#' className='bg-primary-blue py-2 px-6 border border-solid border-primary-blue text-white rounded-full'>Log in</a>
                </div>
                </div>
            </div>
        </nav>
    );
}

The main problem is that the RightComponent stretch under the page when I add more content. It should be stacked (in the middle of right page) with scrollable content inside

CodePudding user response：

So you can do this using grid and set for rows 50px and 1fr or you have to set fixed height to nav for example 50px

function Navbar() {
    return (
        <nav className='bg-primary-grey border-b border-secondary-grey h-[50px]'>
          ...
        </nav>
    )
}

and then

function HomePage() {
    return (
        <div className='flex bg-primary-grey h-[calc(100vh_-_50px)]'>
            ...
        </div>
    );
}