Style Input Element to Fill Remaining Width of Its Container

Style input element to fill remaining width of its container

as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using display:table-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

Getting an input to fill remaining width like a span element

This should do the trick for you:

css

.a {
    display:table-cell; background-color:red;
}
.b {
    display:table-cell; background-color:green; width:100%;
}
.c { width:100%; }
​

html

<div>
  <span class="a">something</span>
  <span class="b">fill the rest</span> 
</div>
<div>
  <span class="a">something</span>
  <span class="b"><input class="c" value="fill the rest" /></span>
</div>

jsfiddle : http://jsfiddle.net/FKZUA/55/

Expand input to take remaining width

The solution is already in your provided link:

.left {
    overflow: hidden;
}

JSFiddle

Another solution would be to add a margin:

.left {
    margin-right: 200px;
}

The first one is more flexible, though.

Input text width to fill the remaining space

I have updated your fiddle here:

http://jsfiddle.net/m4MWD/3/

The Descrizione will not fill the parent, as you have a float on the parent. I have added a higher level wrap with the floats on.

#wrap1 {
float:left;
width:20%;
}
#wrap2 {
float:left;
width:78%;
margin-left:2%;
}

And then added this

div.label_e_campo input {
width:100%;
}

Does this work for you?

text input fill width of container

If you use the css property box-sizing: border-box;, the padding will be no problem and you can use width:100%.

See here: CSS Tricks

Here is an example: jsbin

CSS:

.fill {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%
}

HTML:

<input class="fill" type="text"/>

Input element fill up remaining width

You could add box-sizing: border-box; to your input to avoid the overflow. What it does basically is that the borders and padding will be taken into consideration when setting width: 100%. Note that you'd have to include several vendor-prefixed for different browsers:

.myinput {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid orange; /*just to make border more clear*/
    width: 100%;
}

Little demo: little link.

Expand element to fill remaining area of parent container

Not sure here...

I want it to expand downward to fill the remaining room in the container.

For the ul, is height: 100% inside a display: flex; container would be okay?

*{
  box-sizing: border-box;
  margin: 0;
}
.container{
  width:400px;
  height:400px;
  border: 1px dotted red;
  display: flex;
  flex-direction: column;
}
[type='text']{
  width: 100%;
}
ul{
  background-color: yellow;
  height: 100%;
}

<div class="container">
    <input type="text"/>
    <ul>
        <li>Item</li>
    </ul>
</div>

.square:nth-child(odd) {
  background: rgb(220, 217, 217);
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  column-gap: .5%;
}

.square {
  padding: 4px;
  border: 1px solid red;
}

.square input {

}

.one {
  display: flex;
  flex-flow: column nowrap;
}

  <div class="container">
    <div class="square one">

      <label for="numSelect">Choose an algorithm:</label>
      <input type="text" id="numSelect">

      <label for="arr">Array:</label>
      <input type="text" id="arr">

    </div>
    <div class="square 2">
      <p>buncha text</p>
    </div>
    <div class="square 3">
      <p>buncha text</p>
    </div>
    <div class="square 4">
      <p>buncha text</p>
    </div>
    <div class="square 5">
      <p>buncha text</p>
    </div>
    <div class="square 6">
      <p>buncha text</p>
    </div>
  </div>

.formLine {    overflow: hidden;    background: #ccc;}.formLine input {    width: 100%;}.formLine label {    float: left;}.formLine span {    display: block;    overflow: hidden;    padding: 0 5px;}.formLine button {    float: right;}.formLine input, .formLine button {    box-sizing: border-box;}

<div class="formLine">    <button>click me</button>    <label>some text.. </label>    <span><input type="text" /></span></div>

*
{
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
    border: 0;
    
    padding: 0px;
  
    width: 100px;
    height: 50px;
}

input
{
    background-color: coral;
}

button
{
    background-color: lightblue;
}

div
{
    background-color: lightgreen;
}

<input type="text" placeholder="a">
<button>a</button>
<div>a</div>