Element: overflow event


This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The overflow event is fired when an element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).

It is a proprietary event specific to Gecko (Firefox).

Bubbles Yes
Cancelable Yes
Interface UIEvent
Event handler property Unknown


<div id="wrapper">
    <div id="child"></div>
<label><input type="checkbox" id="toggle" checked/> Overflow</label>

 #wrapper {
    width: 20px;
    height: 20px;
    background: #000;
    padding: 5px;
    overflow: hidden;

  #child {
    width: 40px;
    height: 40px;
    border: 2px solid grey;
    background: #ccc;

  var wrapper = document.getElementById("wrapper"),
      child = document.getElementById("child"),
      toggle = document.getElementById("toggle");

  wrapper.addEventListener("overflow", function( event ) {
      console.log( event );
  }, false);

  wrapper.addEventListener("underflow", function( event ) {
      console.log( event );
  }, false);

  toggle.addEventListener("change", function( event ) {
      if ( event.target.checked ) {
          child.style.width = "40px";
          child.style.height = "40px";
      } else {
          child.style.width = "10px";
          child.style.height = "10px";

  }, false);


Not part of any specification.

Browser compatibility

BCD tables only load in the browser

See also