如何防止 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/