css - figcaption - title html attribute

¿Cómo hacer que el elemento llene el ancho restante, cuando el hermano tiene un ancho variable?

Question

En el siguiente ejemplo:

Quiero que el cuadro de texto llene todo el espacio disponible. El problema es que el ancho del menú desplegable no se puede arreglar, ya que sus elementos no son estáticos. Me gustaría resolver esto con solo css (no javascript si es posible).

He intentado las soluciones propuestas a preguntas similares sin ninguna suerte :(

Aquí está el violín: http://jsfiddle.net/ruben_diaz/cAHb8/

Aquí está el html:

<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">General</option>
<option value="2">Fruits</option>
<option value="3">Ice Creams</option>
<option value="4">Candy</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>

Y aquí el 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;
}

Answer 1

Cambie algunos de esos elementos <span> elementos <div> ; luego float:left la división alrededor de tu desplegable; luego, asigne a la derecha un overflow:hidden y el elemento de entrada en su interior un width:100%; .

Aquí hay un ejemplo . Aquí está otra vez con un mayor desplegable .

Excepto que se enrosca el botón de envío. Por lo tanto, #form_wrapper el #form_wrapper no estático #form_wrapper ( position:relative ) y coloque el botón de envío absolutamente. Mira este violín y este .

Answer 2

La relativamente reciente propiedad ''flex'' display css resuelve este problema para usted:

Todo lo que necesita hacer es cambiar la display del formulario a inline-flex , dar .resizable_text_box flex-grow: 100; y le da a #question_text_box width: 100%

Ejemplo completo de la 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>

Flex-box le permite hacer lo que quería hacer con css durante 15 años, ¡por fin está aquí! Más información: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Demostración actualizada (probado bien en IE7 / 8/9/10, Firefox, Chrome, Safari)

• Flotan los elementos izquierdo y derecho.
• En el código fuente HTML, coloque primero los dos elementos flotados (esta es la parte más importante).
• Dar el overflow: hidden; elemento medio overflow: hidden; y un ancho implícito del 100% .
• Dale al cuadro de texto en el elemento central un ancho del 100% .

.category_dropdown_container {
float: left;
}
input[type="submit"] {
float: right;
...
}
.resizable_text_box {
padding: 0 15px 0 10px;
overflow: hidden;
}
.resizable_text_box input {
width: 100%;
}

<div class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
...
</select>
</div>
<input name="commit" type="submit" value="Ask!" />
<div class="resizable_text_box">
<input id="question_text_box" name="question[what]"
placeholder="Write a query..." type="text" />
</div>