Flexbox布局的form表单无法填满父容器可用宽度如何解决

问题原因说明 #

• flex-grow 只对flex容器的直接子元素生效，你的.search-form的父元素.form-container没有设置flex布局，所以该属性不会生效。
• flex-shrink 是控制flex子项溢出时的收缩规则，和占满父容器宽度的需求无关，所以不会生效。
• width: 100% 无效大多是因为浏览器给form元素默认添加了外边距，或是盒模型规则导致边框、内边距撑出了额外宽度，最终元素实际宽度超出父容器被隐形压缩。

正确实现代码 #

首先重置盒模型与默认边距，再设置表单宽度：

/* 可全局设置也可仅作用于该表单相关元素 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.form-container {
  background-color: red;
}

.search-form {
  display: flex;
  align-items: flex-start;
  /* 占满父容器宽度 */
  width: 100%;
  /* 清除浏览器默认form外边距 */
  margin: 0;
}

/* 额外配置：如果需要搜索框占满表单内剩余空间，添加以下规则 */
.search-form label {
  flex-grow: 1;
}
.search-field {
  width: 100%;
}

修改后.search-form就会完全占满父容器的可用宽度，覆盖掉.form-container的红色背景。

内容的提问来源于stack exchange，提问作者user5481714