I created a CSS layout using TailwindCSS to showcase my current issue. While I used Tailwind Playground for quick layout building, feel free to provide your solution using plain CSS.
Here is the code and result: https://play.tailwindcss.com/8xynVWIRC7
For those unable to visit the link, here is the structure:
<div class="grid grid-cols-4 gap-0 h-screen w-screen overflow-hidden">
<div class="h-screen col-span-1 bg-gray-300 p-6 space-y-6 overflow-y-scroll overflow-x-visible">
<div class="h-36 bg-gray-400 rounded-lg drop-shadow-md"></div>
<!-- more code -->
<div class="h-36 bg-gray-400 rounded-lg drop-shadow-md"></div>
</div>
<div class="col-span-2 bg-gray-100"></div>
<div class="h-screen col-span-1 bg-gray-300 p-6 space-y-6 overflow-y-scroll overflow-x-visible">
<div class="h-36 bg-gray-400 rounded-lg drop-shadow-md"></div>
<!-- more code -->
<div class="h-36 bg-gray-400 rounded-lg drop-shadow-md"></div>
</div>
</div>Now, let me explain the issues I am facing:
In the displayed image, there are sidebars on both left and right sides, with a central content area. The sidebars need to be vertically scrollable due to their content exceeding the screen height.
Issue #1: I want the contents within the sidebars to overflow horizontally outside the sidebar when necessary (especially visible in hover states). Currently, the contents do not overflow outside their parent element (sidebar) because of the "overflow-y-scroll" class I added for vertical scrolling. Removing this class allows horizontal overflow but sacrifices the scroll feature. How can I achieve horizontal overflow while maintaining vertical scroll?
Issue #2: The contents in the right sidebar attempt to overflow to the right instead of towards the main content area (to the left). Using "direction: rtl;" changes the direction of child elements, which does not solve the problem. What approach should I take to correct this issue?
Thank you!