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

Html – how can i create a div that takes up all available space but does not overflow?

I am trying to build a small admin dashboard for a personal application but i can not figure out how to make sure the page itself can now overflow, but rather the elements inside do.

this is the example code i am trying to get to work:

<body>
  <div class="h-screen w-screen bg-teal-100 flex overflow-hidden">
    <!-- Toolbar with a fixed width -->
    <div class="h-full bg-blue-50" style="width: 100px;">Toolbar</div>

    <!-- Container for Sidebar and Content 1, taking up the remaining width -->
    <div class="flex-grow h-full bg-orange-50 flex">
      <!-- Sidebar with a fixed width -->
      <div class="bg-purple-50" style="width: 200px;">Sidebar</div>

      <!-- Content 1 taking the remaining space -->
      <div class="flex-grow h-full bg-indigo-500 flex flex-col">
        <div class="bg-green-50">A</div>
        <div class="bg-purple-50">B</div>
        <div class="flex-grow bg-teal-200 flex flex-col">
          <div class="bg-green-50">Header</div>

          <!-- Table div with growing and scrolling capability -->
          <div class="flex-grow bg-red-200 overflow-auto">
            <!-- Oversized content to demonstrate scrolling -->
            <div class="w-[200vw] h-[200vh] text-white">
              H (large content here to activate scrolling)
            </div>
          </div>

          <div class="bg-purple-50">Footer</div>
        </div>
      </div>
    </div>
  </div>
</body>

what i am trying to achive is to have a table:

 <div class="w-[200vw] h-[200vh] text-white">
              H (large content here to activate scrolling)
 </div>

where if the table overflows i get scrollbars only for that table. This is driving me insane

Tags:

2

Answers


  1. 0 
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Admin Dashboard</title>
      <style>
        body {
          margin: 0;
        }
      </style>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    </head>
    <body>
      <div class="h-screen w-screen bg-teal-100 flex overflow-hidden">
        <!-- Toolbar with a fixed width -->
        <div class="h-full bg-blue-50" style="width: 100px;">Toolbar</div>
    
        <!-- Container for Sidebar and Content 1, taking up the remaining width -->
        <div class="flex-grow h-full bg-orange-50 flex">
          <!-- Sidebar with a fixed width -->
          <div class="bg-purple-50" style="width: 200px;">Sidebar</div>
    
          <!-- Content 1 taking the remaining space -->
          <div class="flex-grow h-full bg-indigo-500 flex flex-col">
            <div class="bg-green-50">A</div>
            <div class="bg-purple-50">B</div>
            <div class="flex-grow bg-teal-200 flex flex-col">
              <div class="bg-green-50">Header</div>
    
              <!-- Table div with growing and scrolling capability -->
              <div class="flex-grow bg-red-200 overflow-auto">
                <!-- Oversized content to demonstrate scrolling -->
                <div class="w-[200vw] h-[200vh] text-white">
                  H (large content here to activate scrolling)
                </div>
              </div>
    
              <div class="bg-purple-50">Footer</div>
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>

    Explanation:

    1. Body and Container Setup: The h-screen w-screen on the main container ensures that the container takes the full height and width of the viewport.
    2. Overflow Handling: The overflow-hidden on the main container prevents the page itself from scrolling.
    3. Fixed Widths: The toolbar and sidebar have fixed widths using inline styles.
    4. Flexible Content Area: The flex-grow classes ensure that the remaining space is used by the content area, with flex ensuring the layout remains flexible.
    5. Scroll Handling on Table Container: The overflow-auto on the div containing the oversized table content (w-[200vw] h-[200vh]) ensures that only this div will scroll when the content overflows.
    Login or Signup to reply.
  2. 0

    In such a realization the scrollable div must have an explicit height specified.

    This line

    <div class="flex-grow bg-teal-200 flex flex-col">

    should be for example

    <div class="flex-grow bg-teal-200 flex flex-col h-0">

    codepen

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

Back To Top
Search