Question 348807 in CSS Question posted in
Some basic documentation can be found here.

Css – Using tailwind to get responsive height

I have a page built with Tailwind which is loading a table of data in the bottom left of the page. However, this is overflowing quite a lot and I’d ideally like it to size itself to the available space and scroll from that point.

In this instance, size to fit the bottom left corner (the browser viewport being the dotted box). The two panels on the left are contained within the red div.

enter image description here

How can I ensure that the bottom left panel never overflows below the browser viewport?

Tags:

2

Answers


  1. 0

    You could set the height of the entire block to be 100svh (smallest view height of the device, very useful for mobile screen with a moving search field).

    Remember to add the overflow-y-scroll to define that you want this section to be scrollable even with content flowing out of it.

    If you would like, you could also let the block get a max-h-[100svh] instead so that it does not take up the entire screen if it does not need to. Hope this guides you in the correct direction. Have a great day!

    <script src="https://cdn.tailwindcss.com"></script>


<section class="grid grid-cols-3">
  <div class="col-span-2 bg-teal-100 grid h-svh overflow-y-scroll">
    <div class="bg-teal-200 h-[30vh]"><p class="p-4">Im the top square</p></div>
    <div class="bg-teal-300 h-[200vh]"><p class="p-4">Im under here</p></div>
  </div>
  <div class="bg-red-100"><p class="p-4">I will stand alone</p></div>
</section>
    Login or Signup to reply.
  2. 0

    Apply the overflow-y: auto property to the element containing the table. This will add a vertical scrollbar when the content overflows the height of the container.
    Additionally, you can use the overflow-x: hidden property to hide any horizontal overflow. This is optional depending on your table’s content and layout.

    Here’s an example Tailwind CSS code snippet:

    <div class="flex h-screen">
<div class="w-1/2 bg-red-500 flex flex-col">
</div>
<div class="w-1/2 overflow-y-auto overflow-x:hidden">
<table class="...">
  </table>
 </div>
 </div>
    • overflow-y-auto: This adds a vertical scrollbar when content overflows.
    • overflow-x-hidden: This hides any horizontal overflow.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search