如何在文本字段中扩展框容器？

Question

我正在尝试在容器执行时扩展文本字段。这是我的容器的图片以及我的文本字段：

现在，当我展开Product Link文本字段时，结果就是：

什么时候应该让盒子的高度更大。这是我用于容器和文本字段的css：

CSS

/* UserPrice Container & Fields */
#user-price-container {
    background:#FFFFFF;
    border:black solid 1px;
    font-family:Arial, Helvetica, sans-serif;
    margin-top:5px;
    width: 950px;
}
.user_price_labels {
    margin-left:5px;
    font-weight:bold;
    color:#78AF00;
}
.user-price-fields {
    font-family:Arial, Helvetica, sans-serif;
    border-right: 1px solid #90BF22;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #FFFFFF, 0 1px 1px rgba(0, 0, 0, 0.17) inset;
    color: #333333;
    font-size: 13px;
    -moz-box-sizing: border-box;
    background: #FFFFFF;
    border-color: black;
    border-radius: 1px 1px 1px 1px;
    display: inline-block;
    height: 25px;
    padding-left: 8px;
    margin-left:5px;
}
/* Individual Text-fields*/
#user-price-price, #user-price-product, #user-price-exact-url {
    margin-top:-2px;
}
#user-price-product-container {
    margin-top:5px;
    margin-left:5px;
}
#user-price-price-container {
    margin-top:5px;
}
#user-price-product-store-container {
    margin-top:-14px;
    height:35px;
}
#user-price-exact-url-container {
    margin-left:44px;
    margin-top:-14px;
    height:35px;
}

HTML（960gs）

<div id="user-price-container" class="grid_24">

    <p id="user-price-product-container" class="grid_12"><label class="user_price_labels" for="user_prices_0_product_name">Product*</label><br />
        <input class="user-price-fields" data-autocomplete="/prices/autocomplete_product_name" id="user-price-product" name="user_prices[0][product_name]" size="60" type="text" /></p>

     <p id="user-price-price-container" class="grid_4"><label class="user_price_labels" for="user_prices_0_price">Price*</label><br />
        <input autocomplete="off" class="user-price-fields" id="user-price-price" name="user_prices[0][price]" placeholder="00.00" size="10" type="text" /></p>

     <p id="user-price-product-store-container" class="grid_11"><label class="user_price_labels" for="user_prices_0_product_store">Location*</label><br />
        <input class="product_store" id="user_prices_0_product_store" name="user_prices[0][product_store]" size="30" type="text" /></p>

     <p id="user-price-exact-url-container" class="grid_9"><label class="user_price_labels" for="user_prices_0_exact_url">Product Link</label><br />
        <textarea class="user-price-fields" cols="40" id="user-price-exact-url" name="user_prices[0][exact_url]" rows="20"></textarea></p>
</div>

如何让它在宽度上动态扩展？

感谢您抽出宝贵时间阅读本文。

Answer 1

从这个类中移除高度，我认为它会起作用，可能会将其更改为min-height而不是删除它。

#user-price-exact-url-container {
    margin-left:44px;
    margin-top:-14px;
    height:35px;
}

Answer 2

#user-price-exact-url-container{
    resize: both;
    overflow: auto;
    min-width: 400px; /*suggest a mid-width & min-height*/
    min-height: 400px;
}

我建议使用上面的代码。