Wie zu verhindern, dass div container resizing

Question

Ich benutze div container als Drop-fähige Element, so dass ich Schaltflächen Elemente dynamisch in diesem div Container hinzufügen. Größe wird geändert, wenn ich Schaltflächen über die Größe hinaus hinzufüge, wie das zu vermeiden?

Hinweis: Dieses Problem tritt in Firefox nur

sample:fiddle

#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; 
} 

// html

<button id="click">ClickME</button> 
<table style="width:20%; height:30%"> 
    <tr> 
     <td> 
      <div id="divContainer"> 
      </div> 
     </td> 
    </tr> 
</table> 

// Skript

$(function() { 

     $("#click").on("click", function() { 

      $("#divContainer").append($("#click").clone()); 
     }); 
    }); 

Answer 1

Try this ..

#divcontainer 
{ 
max-width: 40%; 
max-height: 30%; 
overflow:auto; 
display:inline-block; 
} 

Answer 2

Da Sie Tabelle verwenden, Tabellenelemente nicht gut in verschiedenen Browsern in % Wert nicht geht, passen sie ihre Breite/Höhe entsprechend dem Inhalt. So ist es besser, Sie gehen mit max-width und min-width Wert (das ist auch in Pixel), so dass Cross-Browser erstellen kein Chaos für Ihre design-

Versuchen unter CSS-Code:

#divContainer{ 
    width:100%; 
    min-height:100px; 
    height:40%; 
    max-height:100px; 
    overflow:auto; 
    border:1px solid; 
    display:inline-block; 
} 
#click{ 
    width:100px; 
    height:30px; 
} 
table{ 
    border:1px solid; 
} 
body{ 
    height:1000px; 
} 

Aktualisiert Geige link- https://jsfiddle.net/cpqz01ct/3/