html - 添加按钮提供额外的宽度

Question

我有一个简单的div，里面有2个<textarea>个。它工作正常，直到这里。当我向其添加一个按钮时，div会自动扩展其宽度。我不知道为什么会这样！

请参阅fiddle。

HTML：

<div class="offer_a_help">
    <textarea rows="5"></textarea>
    <textarea rows="5"></textarea>
    <button id="send_offer">Send Offer</button>
</div>

CSS：

.offer_a_help {
    min-width: 350px;
    min-height: 250px;
    position: absolute;
    top: calc(100%/2 - 350px/2);
    left: calc(100%/2 - 250px/2);
    background-color: #eee;
    border: 1px solid #bbb;
    text-align: center;
}
.offer_a_help textarea {
    width: 98%;
    padding: 0;
    margin-top: 3px;
}

Answer 1

在你的第一个小提琴中你使用了宽度/高度：

First

width: 350px;
height: 250px;

在秒中你使用了min-width / min-height

Second

min-width: 350px;
min-height: 250px;

比较你的代码，两者都使用，