为何flex布局下设置width:80%的文本输入框容器未达预期宽度？

问题代码 #

CSS

.outer-container {
  width: 80%;
}

.form-container {
  display: flex;
}

.form-container input[type=text] {
  width: 50%;
  height: 40px;
}

.form-container label {
  margin-right: 10px;
}

HTML

<p>Enter text (an AI will complete it):</p>
<div class="outer-container">
  <div class="form-container">
    <div>
      <label for="text-input-1">Recipient<br></label>
      <input type="text" id="text-input-1" name="text-input-1">
    </div>
    <div>
      <label for="text-input-2">Donor<br></label>
      <input type="text" id="text-input-2" name="text-input-2">
    </div>
  </div>
</div>
<div>
  <input type="submit" value="Submit">
</div>

问题原因 #

1. outer-container的width:80%其实已经生效，但因为内部的form-container是flex容器，它的子元素（包裹label和输入框的div）默认仅由内容撑开宽度，不会自动占满outer-container的空间，所以你看不到明显变化。
2. 输入框设置的width:50%是相对于它的直接父元素（包裹label和输入框的div）的宽度，而非outer-container的宽度，父div本身宽度有限，导致输入框看起来偏窄。

解决方法 #

给form-container的子div添加flex: 1属性，让它们平分outer-container的可用宽度，这样输入框的宽度设置就能基于拉伸后的父容器生效，outer-container的80%宽度效果也会显现。修改后的CSS如下：

.outer-container {
  width: 80%;
}

.form-container {
  display: flex;
  gap: 10px; /* 可选，给两个输入框组之间添加间距 */
}

.form-container > div {
  flex: 1; /* 关键：让子div占满容器可用空间 */
}

.form-container input[type=text] {
  width: 100%; /* 若要输入框占满父div宽度，用100%；保留50%则按需求调整 */
  height: 40px;
}

.form-container label {
  margin-right: 10px;
}

内容的提问来源于stack exchange，提问作者FluidMechanics Potential Flows