HomeCasa Prompts

CSS-Layoutfehler beheben (Flexbox, Grid, Overflow und z-index)

Finde heraus, warum sich dein CSS nicht wie erwartet verhält (Overflow, nicht zentrierte Elemente, wirkungsloser z-index), mit erklärter Ursache, Prüfung in den DevTools und minimalem Fix. Entwickelt für ChatGPT, Claude, Gemini und Microsoft Copilot. Er enthält 5 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Einsteiger · Code · Redaktionelle Prüfung ausstehend

Entwickelt für:

Prompt

Arbeite als CSS-Experte, der die Ursachen von Layoutfehlern verständlich erklärt, ohne Workarounds.

Kontext:
- Relevantes HTML: {{html}}
- Relevantes CSS: {{css}}
- Was passiert: {{problem}}
- Was ich erwartet habe: {{erwartung}}
- Wo es passiert: {{umgebung}}

Wenn der Fehler von einem Elternelement, globalen Styles oder einem nicht gezeigten Framework kommen könnte, frag nach diesem Teil, bevor du eine Lösung vorschlägst.

Liefere:
1. Die Ursache in einfachen Worten mit dem beteiligten Konzept (Boxmodell, min-width: auto bei Flex-Items, Overflow in 1fr-Grid-Spuren, Margin Collapsing, Stacking Contexts, Positionierung, Viewport-Einheiten auf Mobilgeräten).
2. Wie man sie Schritt für Schritt in den Browser-DevTools bestätigt: welches Element prüfen, welches Panel ansehen (Computed, Flexbox- und Grid-Overlays, Layers) und welcher Wert das Problem verrät.
3. Den minimalen Fix mit dem exakten geänderten Code, vorher und nachher.
4. Eine robustere Alternative, falls der minimale Fix fragil ist, mit Vor- und Nachteilen.
5. Prüfungen, damit nichts anderes kaputtgeht: andere Bildschirmbreiten, längere Texte, andere Browser.
6. Eine kurze Faustregel, um den Fehler künftig zu vermeiden.

Vorgaben:
- Kein !important, keine Magic Numbers und kein overflow: hidden, um das Symptom zu verstecken, außer mit Begründung.
- Schreib nicht das ganze Stylesheet neu: ändere nur das Nötige.
- Lässt sich der Fehler mit dem gegebenen Code nicht reproduzieren, sag es und erkläre, was fehlt.

Format: Ursache, Prüfung, Fix mit Codeblöcken, Alternative und Checkliste.

So verwenden Sie ihn

  1. Kürze HTML und CSS auf die Stelle mit dem Fehler, inklusive Elterncontainer. 2. Beschreibe, was du siehst und was du erwartet hast, mit Bildschirmbreite und Browser. 3. Wende den Fix an, führe die Prüfungen durch und melde dich mit dem Ergebnis, falls der Fehler bleibt.

Anwendungsbeispiel

Problem: Auf dem Handy scrollt die Seite seitwärts und eine Grid-Karte läuft über · Erwartet: zwei Spalten, die sich der Breite anpassen · Wo: Safari auf dem iPhone, unter 400 px.

Beispielergebnis

Ursache

1fr bedeutet minmax(auto, 1fr): Das Minimum jeder Spalte ist die Mindestbreite ihres Inhalts. Mit white-space: pre kann das <pre> nicht umbrechen; seine längste Zeile bestimmt dieses Minimum, und die Spalte wächst über den Bildschirm hinaus.

So bestätigen Sie es

Aktivieren Sie in den DevTools das Grid-Overlay für .raster: Die zweite Spur ragt aus dem Container. Unter „Berechnet" ist das <pre> breiter als der Viewport.

Minimale Korrektur

/* Vorher */
.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Nachher */
.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.karte pre { white-space: pre; overflow-x: auto; }

minmax(0, 1fr) erlaubt der Spalte, schmaler als ihr Inhalt zu werden, und overflow-x: auto lässt nur den Codeblock scrollen statt der ganzen Seite.

Robustere Alternative

Eine Spalte auf schmalen Bildschirmen: grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)).

Faustregel

Enthält eine 1fr-Spur nicht umbrechbaren Text, nutzen Sie minmax(0, 1fr) oder min-width: 0 am Kindelement …

Wichtige Fakten

Kategorie
Programmierung & Entwicklung · HTML & CSS
Ausgabetyp
Code
Niveau
Einsteiger
Entwickelt für
ChatGPT, Claude, Gemini und Microsoft Copilot
Verifiziert in
Redaktionelle Prüfung ausstehend
Variablen
Relevantes HTML, Relevantes CSS, Was passiert, Was ich erwartet habe und Wo es passiert
Sprache
Deutsch
Preis
Kostenlos, ohne Anmeldung
Aktualisiert
07.11.2026

Häufig gestellte Fragen

Warum funktioniert mein z-index nicht?

Fast immer, weil die Elemente in verschiedenen Stacking Contexts liegen: Ein Elternelement mit transform, opacity unter 1, Positionierung mit z-index oder isolation erzeugt einen neuen, und z-index konkurriert nur darin.

Warum schrumpft ein Flex-Item trotz Platzmangel nicht?

Flex-Items haben standardmäßig min-width: auto und werden nicht kleiner als ihr Inhalt, etwa ein langes Wort oder ein Bild. min-width: 0 am Item löst das meist.

Wie finde ich das Element, das horizontales Scrollen auslöst?

Suche in den DevTools mit den Layout-Overlays oder einem temporären outline auf allen Elementen nach dem Element, das breiter als der Viewport ist. Der Prompt führt dich durch diese Prüfung.

Wofür ist dieser Prompt gedacht?

Finde heraus, warum sich dein CSS nicht wie erwartet verhält (Overflow, nicht zentrierte Elemente, wirkungsloser z-index), mit erklärter Ursache, Prüfung in den DevTools und minimalem Fix.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude, Gemini und Microsoft Copilot entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Relevantes HTML, Relevantes CSS, Was passiert, Was ich erwartet habe und Wo es passiert). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Nein. Es ist ein Prompt für Einsteiger: Füllen Sie einfach die Angaben aus und fügen Sie ihn in Ihr KI-Tool ein.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts