'Enabling scroll using Tailwindcss

I am using Tailwindcss and trying to achieve a design, in which there is a scroller in middle section.

enter image description here

However, the scroller is disabled and it's full height is not fit to it's parent.

Following is the part of the code:

<div class="h-full bg-green-200">
                <div class="overflow-y-scroll">
                  <p class="my-10">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
                    eius fugit optio sapiente provident enim nihil at nemo
                    molestiae quo, inventore consectetur esse nisi, consequuntur
                    consequatur! Dolor facilis quasi molestiae?
                  </p>
                  <p class="my-10">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
                    eius fugit optio sapiente provident enim nihil at nemo
                    molestiae quo, inventore consectetur esse nisi, consequuntur
                    consequatur! Dolor facilis quasi molestiae?
                  </p>
                  <p class="my-10">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
                    eius fugit optio sapiente provident enim nihil at nemo
                    molestiae quo, inventore consectetur esse nisi, consequuntur
                    consequatur! Dolor facilis quasi molestiae?
                  </p>
                  
                </div>
              </div>

I tried giving h-full, h-fit. I also tried using grow, flex-1. But it isn't working as expected.

Full code here in sandbox:

https://codesandbox.io/s/spring-sun-e9mrrv

htmlcsstailwind-css


Solution 1:[1]

h-full : sets an element’s height to 100% of its parent, as long as the parent has a defined height.

you have set the overflow as hidden to the parent element. So basically your div has full height as its content but the overflow is hidden.

You have also set overflow of your div to scroll but since its fitting its content wholly in the div, the scrollbar is disabled as there is nothing to scroll.

You can either set a fixed height to the div where you need the scroll or some of the parent divs. Check out the solution here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 niraz

Related Questions