title: How to prevent div container being resizing
body: <p>I am using div container as a drop-able element, so I am adding buttons elements dynamically in to this div container. Div size is resizing if I am adding buttons beyond its size how to avoid this?</p>
  
  <p>Note: This issue occurs in Firefox only</p>
  
  <p><a href="https://jsfiddle.net/cpqz01ct/1/" rel="nofollow">sample:fiddle</a></p>
  
  <pre><code>#divContainer{
      width:100%;
      height:40%;
      overflow:auto;
      border:1px solid;
      display:inline-block;
  }
  #click{
      width:100px;
      height:30px;
  }
  table{
      border:1px solid;
  }
  body{
      height:1000px;
  }
  </code></pre>
  
  <p>//html</p>
  
  <pre><code>&lt;button id="click"&gt;ClickME&lt;/button&gt;
  &lt;table style="width:20%; height:30%"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div id="divContainer"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>//script</p>
  
  <pre><code> $(function () {
  
          $("#click").on("click", function () {
  
              $("#divContainer").append($("#click").clone());
          });
      });
  </code></pre>