CODEWITHSUNDEEP
cssfirefox
mevsme
mevsme

Reputation: 549

This element is causing an element to overflow in Firefox

I don't use Bootstrap or reset.css/reboot.css, I am trying to built a website with generic css. I am doing pretty basic things but I get "This element is causing an element to overflow" literally everywhere. I haven't done layouts without any css framework for quite some time and I can not find anything about this issue. Even a br is causing an overflow! What is this? I don't see any scorlls and everything looks just like I expect. This message is just annoying.

enter image description here

I inspected a little bit more and discovered that images are causing this. But I have

.img-responsive, .responsive {
    height: auto;
    max-width: 100%;
}
.img-thumbnail, .thumbnail {
    padding: 0.25rem;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    box-sizing: border-box;
}

And if I delete this image, overflow message will go away for a few elements below. Can anybody tell me what's going on?

enter image description here

Upvotes: 7

Views: 14058

Answers (4)

Jay Sabhaya
Jay Sabhaya

Reputation: 11

I have noticed similar issue with projects I was working on. It seems when you use inspect in the any browser,the HTML elements that are partially displayed because of Inspect console being displayed over them are marked as overflow on that node. Since you have maximized Inspect console, it is covering all the elements of the web page hence they are probably marked as overflow.

Upvotes: 1

stmpjmpr
stmpjmpr

Reputation: 131

From MDN:

A scroll container is created by applying overflow: scroll to a container, or overflow: auto when there is enough content to cause overflow. The Firefox DevTools make it easy to discover both scrollable elements and any elements that are causing overflow.

In the HTML Pane, a scrollable element has the scroll badge next to it...

You can toggle the scroll badge to highlight elements causing an overflow, expanding nodes as needed to make the nodes visible...

You will also see an overflow badge next to the node causing the overflow.

So, if the container has content that is overflowing, it'll be marked with overflow, as you've noticed. Either adjust the content to not overflow, or adjust the container itself to allow for the content without overflowing. The DevTools badges you've noted can be used to identify which items are overflowing which container.

Upvotes: 2

Rafo
Rafo

Reputation: 654

I suggest to create a reset in html

/* ------------ Reset CSS ------------ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

Upvotes: -1

mevsme
mevsme

Reputation: 549

This will help.

html {
    width: 100%;
}

Upvotes: 8

Related Questions