Search code examples
htmlcssreactjsdomtailwind-css

How to remove unnecessary padding caused by resizable divs?

I have a div which I need to be resizable horizontally. Although on adding the css resize property the div gets an unnecessary padding. I'm not sure whether it's even possible or not after a few searches but it's really making the UI look hideous. Attaching the code and screenshot below for the div. I'm using React and Tailwind. Any help will be appreciated.

        <section 
className='bg-[#26252a] min-w-[285px] p-0 min-h-[70vh] overflow-scroll resize-x rounded-xl'
>

</section>

screenshot

I tried setting the padding: 0 !important but still it's of no use. If you see the box model on the right side you can see the component itself has no padding amount but it's still there.

Example JS fiddle - https://jsfiddle.net/Sam_Hawkz/n91gyu7x/1/#&togetherjs=l45GaPxBKQ

Solution

  • You have your overflow set to scroll, which makes the "user agents display scroll bars in both horizontal and vertical directions ... whether or not any content is overflowing or clipped." Change overflow to auto. Here is a working example.