html5填充剩余宽度,css – 如何使元素填充剩余宽度,当兄弟有宽度变化时？

在下面的例子中：

我想要文本框填充所有可用空间.问题是下拉宽度不能固定,因为它的元素不是静态的.我想解决这个只是css(如果可能,没有javascript).

我已经尝试了类似的问题提出的解决方案没有任何运气:(

这是html：

General

Fruits

Ice Creams

Candy

而这里的css：

#form_wrapper {

border: 1px solid blue;

width: 600px;

padding: 5px;

}

form {

display: inline-block;

width: 100%;

}

.category_dropdown_container {

}

.resizable_text_box {

border: 1px solid red;

}

input[type="text"] {

}

input[type="submit"] {

background-color: lightblue;

width: 80px;

float: right;

}