Как заставить контейнер контейнера расширяться, когда текстовое поле делает?

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

Предлагаю код выше.