style="width:100%" is stretching the containing div. I don't want it to

Question

My real project isn't using embedded styling or background colours. Those have been added for troubleshooting purposes only.

Starting with the code below, everything is fine, except the second text input feels a bit short. All the other text inputs stretch to fill the browser window. I don't want it to do that, but I would like it just to fill the section I coloured in red. So stretch all the way to the right, but not all the way to the left.

<label for="phoneNumber">Home Phone</label>
<div style="background:blue;">
	<div style="background:yellow; float:left;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
	<div style="background:red;"><input type="tel" name="phone" id="phoneNumber" autocomplete="tel"></div>
</div>

Given that I would like the text input to fill 100% of the parent div (i.e. area in red), my first instinct is to write style="width:100%;" but this does not have the desired result. See below.

<label for="phoneNumber">Home Phone</label>
<div style="background:blue;">
	<div style="background:yellow; float:left;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
	<div style="background:red;"><input style="width:100%;" type="tel" name="phone" id="phoneNumber" autocomplete="tel"></div>
</div>

How do I make the text input fill the area shown in red?

Answer 1

Use flex like below.

Add display: flex on parent div, and flex: 1 0 auto; on the second input's parent div and width 100% on the second input.

<label for="phoneNumber">Home Phone</label>
<div style="background: :blue; display: flex;">
  <div style="background:yellow;;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
  <div style="background:red;flex: 1 0 auto;">
    <input type="tel" name="phone" id="phoneNumber" autocomplete="tel" style="    width: 100%;"></div>
</div>