Question 44123 in Html Question posted in
Some basic documentation can be found here.

Scroll sections using tailwindcss – Html

so i have a code that look like this

<div className='w-[50%] h-full flex items-center justify-center flex-col'>
        <div className='container grid grid-cols-2 grid-rows-4 p-10 gap-5 w-full h-full'>
            <div className='row-span-1 border-2 border-black'>1</div>
            <div className='row-span-2 border-2 border-black'>2</div>
            <div className='row-span-2 border-2 border-black'>3</div>
            <div className='row-span-2 border-2 border-black'>4</div>
            <div className='row-span-1 border-2 border-black'>5</div>
        </div>
</div>

Resulting to a layout that looks like this

enter image description here

If i added another one of this section below my code the result is this

enter image description here

How to make those 2 section not merge height with one another and the user can scroll instead??

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So the answer is pretty simple, I added <section> tags outside of each grids


  2. 0

    From what I understand you need to duplicate the section in the first pic below the already present section… this is one way to achieve it.

    <section className="h-full overflow-y-scroll">
                <div className='w-[50%] h-full flex items-center justify-center flex-col'>
                    <div className='container grid grid-cols-2 grid-rows-4 p-10 gap-5 w-full h-full'>
                        <div className='row-span-1 border-2 border-black'>1</div>
                        <div className='row-span-2 border-2 border-black'>2</div>
                        <div className='row-span-2 border-2 border-black'>3</div>
                        <div className='row-span-2 border-2 border-black'>4</div>
                        <div className='row-span-1 border-2 border-black'>5</div>
                    </div>
                </div>
                <div className='w-[50%] h-full flex items-center justify-center flex-col'>
                    <div className='container grid grid-cols-2 grid-rows-4 p-10 gap-5 w-full h-full'>
                        <div className='row-span-1 border-2 border-black'>1</div>
                        <div className='row-span-2 border-2 border-black'>2</div>
                        <div className='row-span-2 border-2 border-black'>3</div>
                        <div className='row-span-2 border-2 border-black'>4</div>
                        <div className='row-span-1 border-2 border-black'>5</div>
                    </div>
                </div>
            </section>

    and this is the output with scrollbar
    enter image description here
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search