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

Html – Sidebar making horizontal scroll bar appear at the bottom of the screen

The first child div is a sidebar and the second a table:

<div class="flex w-full flex-col items-start justify-start gap-6 md:flex-row">
  <div class="flex w-full flex-col items-start justify-start gap-2 md:w-auto">
    <!-- Sidebar (md:max-w-64) -->
    </div>
  </div>
  <div class="flex w-full flex-col items-start justify-start gap-6">
    <!-- Table -->
  </div>
</div>

The sidebar is causing the layout to have a second horizontal scrollbar at the bottom:

enter image description here

I know it’s the sidebar because that second scrollbar disappears if I remove the sidebar:

enter image description here

https://play.tailwindcss.com/AU3667Sv4d

What’s the issue here and how to fix it?

Tags:

2

Answers


  1. 0 
    <div class="flex w-full flex-col items-start justify-start gap-6 md:flex-row">
 <div class="flex w-full flex-col items-start justify-start gap-2 md:w-auto">
  <!-- Sidebar (md:max-w-64) -->
 </div>
</div>
<!-- just remove lefbar width from full viewport width as below till md breakpoint -->
 <div class="flex w-full md:w-[calc(100vw_-_200px)] flex-col items-start justify-start gap-6">
  <!-- Table -->
</div>

    working example

    Login or Signup to reply.
  2. 0

    Elements in a horizontal flex layout have min-width: min-content applied implicitly. When the sidebar is visible, the two element’s min-content may exceed the viewport width, introducing the viewport horizontal scrollbar.

    To work around this, consider overriding the min-width to 0, so that the element containing the table can shrink as much as needed to fit horizontally:

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

<div class="flex w-full flex-col items-start justify-start gap-6 md:flex-row">
  <div class="flex w-full flex-col items-start justify-start gap-2 md:w-auto">
    <div class="border-border flex max-h-[calc(100vh-7.5rem)] w-full flex-col items-start justify-start gap-0 overflow-y-auto rounded border shadow md:max-w-64 md:gap-1 md:border-none md:pb-1 md:pr-1 md:shadow-none">
      <div class="flex h-10 w-full cursor-pointer items-center justify-between gap-2 px-3 py-2 md:h-auto md:px-0 md:py-0">
        <h2 class="text-muted overflow-hidden text-ellipsis whitespace-nowrap text-sm font-normal uppercase leading-tight tracking-tight">Filters</h2>
        <button class="ring-offset-background focus-visible:ring-ring text-foreground hover:text-foreground/90 inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium underline-offset-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 md:hidden">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down"><path d="M6 9l6 6l6 -6"></path></svg>
        </button>
      </div>
      <div class="hidden w-full md:block">
        <div class="flex w-full flex-col items-center justify-center gap-1">
          <button class="ring-offset-background focus-visible:ring-ring text-foreground hover:text-primary inline-flex w-full items-center justify-start gap-2 whitespace-nowrap rounded px-2 py-1 text-sm font-medium underline-offset-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-star h-4 w-4 shrink-0"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>Favorites (3)
          </button>
        </div>
      </div>
      <div class="w-full overflow-hidden transition-all duration-300 ease-in-out md:hidden" style="max-height: 0px;">
        <div class="w-full px-3 pb-2">
          <div class="flex w-full flex-col items-center justify-center gap-1">
            <button class="ring-offset-background focus-visible:ring-ring text-foreground hover:text-primary inline-flex w-full items-center justify-start gap-2 whitespace-nowrap rounded px-2 py-1 text-sm font-medium underline-offset-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-star h-4 w-4 shrink-0"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>Favorites (3)
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="border-border flex max-h-[calc(100vh-7.5rem)] w-full flex-col items-start justify-start gap-0 overflow-y-auto rounded border shadow md:max-w-64 md:gap-1 md:border-none md:pb-1 md:pr-1 md:shadow-none">
      <div class="flex h-10 w-full cursor-pointer items-center justify-between gap-2 px-3 py-2 md:h-auto md:px-0 md:py-0">
        <h2 class="text-muted overflow-hidden text-ellipsis whitespace-nowrap text-sm font-normal uppercase leading-tight tracking-tight">Categories</h2>
        <button class="ring-offset-background focus-visible:ring-ring text-foreground hover:text-foreground/90 inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium underline-offset-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 md:hidden">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down"><path d="M6 9l6 6l6 -6"></path></svg>
        </button>
      </div>
    </div>
  </div>
  <div class="flex w-full min-w-0 flex-col items-start justify-start gap-6">
    <div class="flex w-full flex-col items-start justify-start gap-2">
      <div class="flex w-full flex-col items-start justify-end gap-2 md:flex-row">
        <button type="button" class="border-border ring-foreground hover:shadow-dark text-foreground bg-secondary flex h-10 w-full items-center justify-center gap-2 whitespace-nowrap rounded border px-4 py-2 text-sm font-medium shadow ring-offset-2 focus:outline-none focus-visible:ring-2 md:w-auto">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-table-options">
            <path d="M12 21h-7a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7"></path>
            <path d="M3 10h18"></path>
            <path d="M10 3v18"></path>
            <path d="M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
            <path d="M19.001 15.5v1.5"></path>
            <path d="M19.001 21v1.5"></path>
            <path d="M22.032 17.25l-1.299 .75"></path>
            <path d="M17.27 20l-1.3 .75"></path>
            <path d="M15.97 17.25l1.3 .75"></path>
            <path d="M20.733 20l1.3 .75"></path></svg
          >Customize Table
        </button>
        <div class="flex gap-2">
          <button class="ring-offset-background focus-visible:ring-ring bg-primary text-primary-foreground border-border hover:bg-primary/90 inline-flex h-10 w-10 items-center justify-center whitespace-nowrap rounded-full border text-sm font-medium transition-colors [box-shadow:4px_4px_0px_rgba(0,0,0,0.1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rows3 h-4 w-4 shrink-0">
              <rect width="18" height="18" x="3" y="3" rx="2"></rect>
              <path d="M21 9H3"></path>
              <path d="M21 15H3"></path>
            </svg></button
          ><button class="ring-offset-background focus-visible:ring-ring border-border text-foreground hover:bg-subtle bg-background inline-flex h-10 w-10 items-center justify-center whitespace-nowrap rounded-full border text-sm font-medium transition-colors [box-shadow:4px_4px_0px_rgba(0,0,0,0.1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grid2x2 h-4 w-4 shrink-0">
              <rect width="18" height="18" x="3" y="3" rx="2"></rect>
              <path d="M3 12h18"></path>
              <path d="M12 3v18"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="flex w-full flex-col items-start justify-start gap-6 md:flex-row">
        <div class="flex w-full flex-col items-start justify-start gap-4">
          <div class="w-full overflow-x-auto">
            <table class="min-w-full">
              <thead class="bg-subtle">
                <tr>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">name</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">type</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">id</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">fields</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">organizations</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">persons</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">contentAssets</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">tags</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">favs</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">createDateTime</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">lastUpdateDateTime</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">lastUpdateUserName</h2></th>
                  <th class="cursor-pointer px-4 py-2 text-left"><h2 class="flex max-w-full items-center gap-2 overflow-hidden text-ellipsis text-nowrap text-sm font-semibold uppercase tracking-tight">createUserName</h2></th>
                </tr>
              </thead>
              <tbody class="divide-subtle divide-y">
                <!-- First row -->
                <tr class="hover:bg-subtle">
                  <td class="px-4 py-2 text-sm">SD-001</td>
                  <td class="px-4 py-2 text-sm">Computer</td>
                  <td class="px-4 py-2 text-sm">1a9ddc03-db28-4d68-9bc9-20770a695faa</td>
                  <td class="px-4 py-2 text-sm">-</td>
                  <td class="px-4 py-2 text-sm">瀚霖科技股份有限公司</td>
                  <td class="px-4 py-2 text-sm">-</td>
                  <td class="px-4 py-2 text-sm">-</td>
                  <td class="px-4 py-2 text-sm">
                    <div class="flex w-full flex-col items-start justify-start gap-2 md:flex-row">
                      <span class="bg-subtle text-foreground flex items-center gap-2 rounded px-2 py-1 text-sm">NetworkElement</span>
                    </div>
                  </td>
                  <td class="px-4 py-2 text-sm">
                    <div class="flex w-full flex-col items-start justify-start gap-2 md:flex-row">
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-star"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>
                    </div>
                  </td>
                  <td class="px-4 py-2 text-sm">2024-10-02 06:03:35</td>
                  <td class="px-4 py-2 text-sm">2024-10-08 06:25:33</td>
                  <td class="px-4 py-2 text-sm">Kevin Wang</td>
                  <td class="px-4 py-2 text-sm">Kevin Wang</td>
                </tr>
                <!-- Second row -->
                <tr class="hover:bg-subtle">
                  <td class="px-4 py-2 text-sm">-</td>
                  <td class="px-4 py-2 text-sm">-</td>
                  <td class="px-4 py-2 text-sm">b0c9c490-db8c-4e77-bcb3-66b60db55bb0</td>
                  <td class="px-4 py-2 text-sm">-</td>
                  <td class="px-4 py-2 text-sm">瀚霖科技股份有限公司</td>
                  <td class="px-4 py-2 text-sm">-</td>
                  <td class="px-4 py-2 text-sm">-</td>
                  <td class="px-4 py-2 text-sm">
                    <div class="flex w-full flex-col items-start justify-start gap-2 md:flex-row"><span class="bg-subtle text-foreground flex items-center gap-2 rounded px-2 py-1 text-sm">EndpointElement</span><span class="bg-subtle text-foreground flex items-center gap-2 rounded px-2 py-1 text-sm">sss</span></div>
                  </td>
                  <td class="px-4 py-2 text-sm">
                    <div class="flex w-full flex-col items-start justify-start gap-2 md:flex-row">
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-star"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>
                    </div>
                  </td>
                  <td class="px-4 py-2 text-sm">2024-10-01 06:56:19</td>
                  <td class="px-4 py-2 text-sm">2024-10-02 07:54:46</td>
                  <td class="px-4 py-2 text-sm">admin</td>
                  <td class="px-4 py-2 text-sm">Javier Collados</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="flex w-full items-start justify-end gap-2"></div>
  </div>
</div>

    Tailwind Play

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

Back To Top
Search