Get input text field to fill width of parent container

July 29, 2023

I have followed multiple suggestions in respect to box sizing. I cannot get the input to politely stretch (expand) to fit the available space.

Does anyone have any suggestions?

.form-label {
    cursor:pointer;
    padding:10px 8px 0px 8px;
    min-width:60px;
    text-align:right;
}

.form-label,
.form-field {
    float:left;
}

.clear { 
    clear:both;
}

.form-row {
    display:flex;
    margin-bottom:4px;
    background-color:#000000;
}
    
.form-field input {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    height:36px;
    width:100%;
    max-width:100%;
    -webkit-flex:1;
}

.form-field select {
    height:36px;
    margin-right:6px;
}

<div class="form-row">
    <div class="form-label">
        <label for="label">Label:</label>
    </div>
    <div class="form-field">
        <input type="text" name="label" id="label" value="" />
    </div>
    <div class="clear"></div>
</div>
<div class="form-row">
    <div class="form-label">
    <label for="radius">Radius:</label>
</div>
<div class="form-field">
    <select name="unit_for_radius" id="unit_for_radius">
        <option value="CM">Centimeter</option>
    </select>
</div>
<div class="form-field"><input type="number" name="radius" id="radius" value="" required pattern="\d+" />
</div>
<div class="clear">
</div>
</div>

Current output:

Tried using absolute positioning which makes the input field expand past the edge of the container (parent).

desired output

>Solution :

Try This:

.form-label {
    cursor:pointer;
    padding:10px 8px 0px 8px;
    min-width:60px;
    text-align:right;
}

.form-field {
  width: 100%;
}

.auto-width-form-field {
  width: 100%;
}

.form-label,
.form-field {
    float:left;
}

.clear { 
    clear:both;
}

.form-row {
    display:flex;
    margin-bottom:4px;
    background-color:#000000;
}
    
.form-field input {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    height:36px;
    width:100%;
    max-width:100%;
    -webkit-flex:1;
}

.form-field-auto-width select {
    height:36px;
    margin-right:6px;
}

<div class="form-row">
    <div class="form-label">
        <label for="label">Label:</label>
    </div>
    <div class="form-field">
        <input type="text" name="label" id="label" value="" />
    </div>
    <div class="clear"></div>
</div>
<div class="form-row">
    <div class="form-label">
    <label for="radius">Radius:</label>
</div>
<div class="form-field-auto-width">
    <select name="unit_for_radius" id="unit_for_radius">
        <option value="CM">Centimeter</option>
    </select>
</div>
<div class="form-field"><input type="number" name="radius" id="radius" value="" required pattern="\d+" />
</div>
<div class="clear">
</div>
</div>

Explanation:

The parent width of the input was only stretching as much as your input needs.

Consequently if you set the input width to take 100% of the parent width it will still only take as much space as it needs.

So I adjusted the input parent space so it takes 100% of it’s parent.

Also I made few adjustments to the select separately so that one doesn’t stretch.