HomeCasa Prompts

Fix a CSS layout bug (Flexbox, Grid, overflow and z-index)

Find out why your CSS does not behave as expected (overflow, elements that will not center, z-index that does nothing) with the root cause explained, how to confirm it in DevTools and the minimal fix. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 5 customizable variables and you can copy it for free in one click.

Beginner · Code · Pending editorial review

Designed for:

Prompt

Act as a CSS expert who explains the causes of layout bugs clearly, without hacks.

Context:
- Relevant HTML: {{html}}
- Relevant CSS: {{css}}
- What happens: {{problem}}
- What I expected: {{expected}}
- Where it happens: {{where}}

If the bug might come from a parent element, global styles or a framework not shown in the code, ask me for that part before proposing a fix.

Deliverables:
1. The root cause in plain language, naming the concept involved (box model, min-width: auto on flex items, overflow in 1fr Grid tracks, margin collapsing, stacking contexts, positioning, viewport units on mobile).
2. How to confirm it step by step in the browser DevTools: which element to inspect, which panel to look at (computed, Flexbox and Grid overlays, layers) and which value gives the problem away.
3. The minimal fix with the exact code that changes, before and after.
4. A more robust alternative if the minimal fix is fragile, with pros and cons.
5. Checks so nothing else breaks: other screen widths, longer text, other browsers.
6. A short rule of thumb to avoid this bug in the future.

Constraints:
- No !important, magic numbers or overflow: hidden to hide the symptom unless you justify it.
- Do not rewrite the whole stylesheet: change only what is needed.
- If the bug cannot be reproduced with the code I gave you, say so and explain what is missing.

Output format: cause, verification, fix with code blocks, alternative and a checklist.

How to use it

  1. Trim the HTML and CSS down to where the bug happens, including the parent container. 2. Describe what you see and what you expected, with the screen width and browser. 3. Apply the fix, run the checks and come back with the result if it persists.

Usage example

Problem: on mobile the page scrolls sideways and one grid card overflows its container · Expected: two columns that fit the width · Where: Safari on iPhone, under 400 px.

Sample output

Root cause

1fr means minmax(auto, 1fr): each column's minimum is its content's minimum width. With white-space: pre, the <pre> can't wrap, so its longest line sets that minimum and the column grows past the screen.

How to confirm

In DevTools, turn on the Grid overlay for .grid: the second track sticks out of the container. In Computed, the <pre> is wider than the viewport.

Minimal fix

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

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

minmax(0, 1fr) lets the column shrink below its content, and overflow-x: auto scrolls only inside the code block instead of the whole page.

More robust alternative

A single column on narrow screens: grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)).

Rule of thumb

If a 1fr track holds text that can't wrap, use minmax(0, 1fr) or min-width: 0 on the child…

Key facts

Category
Programming & development · HTML & CSS
Output type
Code
Level
Beginner
Designed for
ChatGPT, Claude, Gemini and Microsoft Copilot
Verified in
Pending editorial verification
Variables
Relevant HTML, Relevant CSS, What happens, What I expected and Where it happens
Language
English
Price
Free, no sign-up
Updated
Nov 7, 2026

Frequently asked questions

Why does my z-index not work?

Almost always because the elements live in different stacking contexts: a parent with transform, opacity below 1, positioned with a z-index, or isolation creates a new one, and z-index only competes inside it.

Why will a flex item not shrink even when space is tight?

Flex items default to min-width: auto, so they will not shrink below their content, such as a long word or an image. Setting min-width: 0 on the item usually fixes it.

How do I find what causes horizontal scrolling?

In DevTools, look for the element wider than the viewport using the layout overlays or a temporary outline on every element. The prompt walks you through that check.

What is this prompt for?

Find out why your CSS does not behave as expected (overflow, elements that will not center, z-index that does nothing) with the root cause explained, how to confirm it in DevTools and the minimal fix.

Which AI tools does it work with?

It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.

How do I customize the prompt?

Click “Customize” and fill in the variables (Relevant HTML, Relevant CSS, What happens, What I expected and Where it happens). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.

Do I need experience to use it?

No. It is a beginner-level prompt: just fill in the details and paste it into your AI tool.

Is this prompt free?

Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.

Can I trust the AI output?

Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.

Related prompts