fix layout flexbug

Author: bradlc

src/layouts/ContentsLayout.js

@@ -8,7 +8,6 @@ import {
   useContext,
 } from 'react'
 import { ClassTable } from '@/components/ClassTable'
-import { useIsHome } from '@/hooks/useIsHome'
 import { usePrevNext } from '@/hooks/usePrevNext'
 import Link from 'next/link'
 import { SidebarLayout, SidebarContext } from '@/layouts/SidebarLayout'
@@ -165,56 +164,51 @@ export function ContentsLayout({ children, meta, classes, tableOfContents }) {
   ]
 
   const { currentSection, registerHeading, unregisterHeading } = useTableOfContents(toc)
-  let isHome = useIsHome()
   let { prev, next } = usePrevNext()
 
   return (
-    <div id={meta.containerId} className="pt-10 pb-16 w-full">
-      <div className="flex">
-        <div className="flex-auto px-6 xl:px-8">
-          <PageHeader
-            title={meta.title}
-            description={meta.description}
-            badge={{ key: 'Tailwind CSS version', value: meta.featureVersion }}
-            border={!classes && meta.headerSeparator !== false}
-          />
-          <ContentsContext.Provider value={{ registerHeading, unregisterHeading }}>
-            {classes && (
-              <ClassTable {...(isValidElement(classes) ? { custom: classes } : classes)} />
-            )}
-            {children}
-          </ContentsContext.Provider>
-          {(prev || next) && (
-            <>
-              <hr />
-              <div className="-mt-6 flex justify-between">
-                {prev && (
-                  <Link href={prev.href}>
-                    <a className="font-medium text-blue-500 underline hover:text-blue-700">
-                      ← {prev.shortTitle || prev.title}
-                    </a>
-                  </Link>
-                )}
-                {next && (
-                  <Link href={next.href}>
-                    <a className="font-medium text-blue-500 underline hover:text-blue-700">
-                      {next.shortTitle || next.title} →
-                    </a>
-                  </Link>
-                )}
-              </div>
-            </>
+    <div id={meta.containerId} className="pt-10 pb-16 w-full flex">
+      <div className="min-w-0 flex-auto px-6 xl:px-8">
+        <PageHeader
+          title={meta.title}
+          description={meta.description}
+          badge={{ key: 'Tailwind CSS version', value: meta.featureVersion }}
+          border={!classes && meta.headerSeparator !== false}
+        />
+        <ContentsContext.Provider value={{ registerHeading, unregisterHeading }}>
+          {classes && <ClassTable {...(isValidElement(classes) ? { custom: classes } : classes)} />}
+          {children}
+        </ContentsContext.Provider>
+        {(prev || next) && (
+          <>
+            <hr />
+            <div className="-mt-6 flex justify-between">
+              {prev && (
+                <Link href={prev.href}>
+                  <a className="font-medium text-blue-500 underline hover:text-blue-700">
+                    ← {prev.shortTitle || prev.title}
+                  </a>
+                </Link>
+              )}
+              {next && (
+                <Link href={next.href}>
+                  <a className="font-medium text-blue-500 underline hover:text-blue-700">
+                    {next.shortTitle || next.title} →
+                  </a>
+                </Link>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+      <div className="hidden xl:text-sm xl:block flex-none w-64 pl-8 pr-12">
+        <div className="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-18) -mt-10 pt-10 pb-4 top-18">
+          {toc.length > 0 && (
+            <div className="mb-8">
+              <TableOfContents tableOfContents={toc} currentSection={currentSection} />
+            </div>
           )}
         </div>
-        <div className="hidden xl:text-sm xl:block flex-none w-64 pl-8 pr-12">
-          <div className="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-18) -mt-10 pt-10 pb-4 top-18">
-            {toc.length > 0 && (
-              <div className="mb-8">
-                <TableOfContents tableOfContents={toc} currentSection={currentSection} />
-              </div>
-            )}
-          </div>
-        </div>
       </div>
     </div>
   )

src/layouts/SidebarLayout.js

@@ -291,15 +291,14 @@ export function SidebarLayout({ children, navIsOpen, setNavIsOpen, nav, sidebar,
           </div>
           <div
             id="content-wrapper"
-            className={clsx('min-h-screen flex-auto lg:static lg:max-h-full lg:overflow-visible', {
-              'overflow-hidden max-h-screen fixed': navIsOpen,
-            })}
+            className={clsx(
+              'min-h-screen min-w-0 flex-auto lg:static lg:max-h-full lg:overflow-visible',
+              {
+                'overflow-hidden max-h-screen fixed': navIsOpen,
+              }
+            )}
           >
-            <div id="content">
-              <div id="app" className="flex">
-                {children}
-              </div>
-            </div>
+            {children}
           </div>
         </div>
       </div>