Css 当同级具有可变宽度时，如何使元素填充剩余宽度？

在以下示例中：

我想让文本框填满所有可用空间。问题是下拉列表的宽度不能固定，因为它的元素不是静态的。我想用css解决这个问题（如果可能的话，不用javascript）

我尝试过针对类似问题提出的解决方案，但没有任何运气：(

这是小提琴：

以下是html：

---

将其中一些

元素更改为

元素；然后

浮动：左

下拉列表周围的除法；然后为右侧元素指定一个

溢出：隐藏

，其中的输入元素指定一个

宽度：100%；

---

除了把提交按钮弄坏了之外。所以给

#表单包装器
非静态定位（
位置：相对
）并绝对定位提交按钮。请参阅和。
（在IE7/8/9/10、Firefox、Chrome、Safari中测试良好）


浮动左右元素
在HTML源代码中，将两个浮动元素放在第一位（这是最重要的部分）
给出中间元素
溢出：隐藏；
和隐式宽度
100%
< LI>在中间元素中给出文本框的宽度：<代码> 100% < /代码> .


.category\u下拉列表\u容器{
浮动：左；
}
输入[type=“submit”]{
浮动：对；
...
}
.可调整大小的文本框{
填充：0 15px 0 10px；
溢出：隐藏；
}
.可调整大小的文本框输入{
宽度：100%；
}

...
相对较新的“flex”显示css属性为您解决了这个问题：

您需要做的就是将表单的
显示更改为
内联flex
，给出
。可调整大小的文本框
flex-grow:100；
并给出
问题文本框
宽度：100%

OP的完整示例：

<style>
#form_wrapper {
    border: 1px solid blue;
    width: 600px;
    padding: 5px;
}
form {
    display: inline-flex;
    width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
    border: 1px solid red;
    flex-grow: 100;
}
#question_text_box {
    width: 100%   
}
input[type="text"] {
}
input[type="submit"] {
    background-color: lightblue;
    width: 80px;
    float: right;
}
</style>

<div id="form_wrapper">
    <form accept-charset="UTF-8" action="/some_action" method="post">
        <span class="category_dropdown_container">
            <select class="chosen chzn-done" name="question[category_id]" id="selQJK">
                <option value="1">Options</option>
            </select>
        </span>
        <span class="resizable_text_box">
            <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
        </span>
        <input name="commit" type="submit" value="Ask!" />
    </form>
</div>


#表格包装{
边框：1px纯蓝色；
宽度：600px；
填充物：5px；
}
形式{
显示：内联flex；
宽度：100%；
}
.category_下拉列表_容器{
}
.可调整大小的文本框{
边框：1px纯红；
弹性增长：100；
}
#问题文本框{
宽度：100%
}
输入[type=“text”]{
}
输入[type=“submit”]{
背景颜色：浅蓝色；
宽度：80px；
浮动：对；
}
选择权

Flex box让你可以用css做你15年来想做的事情——终于到了！更多信息：
如果我们被允许编辑html（你的答案就是这样的）这就是解决问题的方法。这对我来说是一个改变游戏规则的方法。我开始知道顺序很重要。非常感谢。我自己在寻找解决方案时刚刚遇到了这个答案，我不同意这里的解决方案，HTML应该是语义的，并且具有逻辑意义，但事实并非如此。捏造HTML顺序来纠正美学是不正确的解决问题的正确方法。谢谢你花时间@Richard，但我发现Matt提供的解决方案更合适。
#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;
}

<style>
#form_wrapper {
    border: 1px solid blue;
    width: 600px;
    padding: 5px;
}
form {
    display: inline-flex;
    width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
    border: 1px solid red;
    flex-grow: 100;
}
#question_text_box {
    width: 100%   
}
input[type="text"] {
}
input[type="submit"] {
    background-color: lightblue;
    width: 80px;
    float: right;
}
</style>

<div id="form_wrapper">
    <form accept-charset="UTF-8" action="/some_action" method="post">
        <span class="category_dropdown_container">
            <select class="chosen chzn-done" name="question[category_id]" id="selQJK">
                <option value="1">Options</option>
            </select>
        </span>
        <span class="resizable_text_box">
            <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
        </span>
        <input name="commit" type="submit" value="Ask!" />
    </form>
</div>