divコンテナのサイズ変更を防ぐ方法

Question

divコンテナをドロップ可能な要素として使用していますので、このdivコンテナにボタン要素を動的に追加しています。このサイズを超えてボタンを追加するとDivのサイズがリサイズされます

注：この問題は、Firefoxでのみ発生

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> 

//スクリプト

$(function() { 

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

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

Answer 1

はこれを試してみてください。..

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

Answer 2

あなたがテーブルを使用しているので、テーブルの要素が異なるブラウザで%値でよく行くしない、彼らは内容に応じてそれらの幅/高さを調整します。クロスブラウザはあなたの設計 - のための任意の混乱を作成しないように、だから、その、より良いあなたは、（つまり、ピクセル単位でもあります）max-widthとmin-width値と行く

CSSコードの下に試してみてください。

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

がフィドルを更新しましたリンク https://jsfiddle.net/cpqz01ct/3/