Kapsayıcı yeniden boyutlandırılıyor nasıl engellenir

Question

Boş bırakma öğesi olarak div kapsayıcısını kullanıyorum, bu nedenle bu div kapsayıcısına dinamik olarak düğme öğeleri ekliyorum. Boyutundan daha büyük düğmeler ekleyerek bunun nasıl engelleneceğini Div boyutu yeniden boyutlandırılıyor?

Not: Bu sorun Firefox'ta oluşur, sadece

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> 

// komut

$(function() { 

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

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

Answer 1

bu deneyin ..

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

Answer 2

Tabloyu kullandığınıza göre, tablo elemanları farklı tarayıcılarda % değerindeki iyi gider etmez, içeriğine göre kendi genişlik/yükseklik ayarı. Yani onun daha iyi css kodunun altında tasarım-

Try için çapraz tarayıcı herhangi bir karışıklık oluşturmaz, böylece (yani piksel olarak da var) max-width ve min-width değeri ile gidin:

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

Güncelleme keman link- https://jsfiddle.net/cpqz01ct/3/