html - 样式 ="width:100%"正在拉伸(stretch)包含的 div。我不想这样

Question

我的实际元素没有使用嵌入式样式或背景颜色。添加这些仅用于故障排除目的。

从下面的代码开始，一切都很好，除了第二个文本输入感觉有点短。所有其他文本输入都会拉伸(stretch)以填充浏览器窗口。我不希望它这样做，但我希望它只填充我用红色着色的部分。所以一直向右拉伸(stretch)，但不要一直向左拉伸(stretch)。

<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>

鉴于我希望文本输入填充 100% 的父 div(即红色区域)，我的第一直觉是编写 style="width:100%;" 但是这没有预期的结果。见下文。

<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>

如何让文本输入填充红色区域？

Answer 1

像下面这样使用flex。

在父 div 上添加 display: flex，在第二个输入的父 div 上添加 flex: 1 0 auto;，在第二个输入上添加宽度 100%。

<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>