Verhindern Sie, dass Div im Next.js-Layout über den Bildschirm hinausragt ⇐ CSS

[Guest]

Ich arbeite mit einem Next.js-Projekt und habe das folgende Layout eingerichtet. Mein Problem ist, dass ein Div in meiner Page.tsx über den Bildschirm hinausreicht und einen unerwünschten Überlauf verursacht. Ich möchte sicherstellen, dass der Inhalt vollständig im Ansichtsfenster enthalten ist.
Hier sind die relevanten Teile meines Codes:
Layout.tsx-Code

Code: Select all

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/app-sidebar";
import { AuthProvider } from "@/AuthContext";
import { ThemeProvider } from "@/components/theme-provider"

const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});

const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});

export const metadata: Metadata = {
title: "Lumos",
description: "SNU CGPA Calculator",
};

export default function RootLayout({
children,
}: Readonly) {
return (








{children}





);
}

Page.tsx-Code

Code: Select all

import { ModeToggle } from "@/components/dark-mode-toggle";

export default function Home() {
return (





Hello



);
}

Aktuelle Ausgabe


Problem:
Wie Sie im Screenshot unten sehen können, erstreckt sich der Inhalt (div) über den Bildschirm hinaus und verursacht einen unerwünschten horizontalen Bildlauf. Ich möchte sicherstellen, dass der gesamte Inhalt im Ansichtsfenster bleibt, ohne dass es zu einem Überlauf kommt.
Was ich versucht habe:
Ich habe w-screen für die Breite verwendet , aber es hat das Problem nicht gelöst.
Das h-full auf dem untergeordneten Div scheint dazu zu führen, dass es auch über den Bildschirm hinausragt.

Kann Hat jemand einen Vorschlag, wie man das Überlaufproblem beheben kann? Ich möchte sicherstellen, dass der Inhalt innerhalb der Grenzen des Ansichtsfensters bleibt.