This element is causing an element to overflow in Firefox

user_1148272 0
Viewed 2265

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

firefox css
3 Answers

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.

user_36425890

This will help.

html {
    width: 100%;
}
user_11482720

I suggest to create a reset in html

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