flexbox布局中为何仅输入框所在div不随其他元素一同收缩？

• 搜索栏容器#sBar设置了固定像素宽度width: 534px，固定宽度容器无法随窗口缩放，直接限制了内部输入框的自适应能力。
• 输入框默认自带min-width: auto属性，Flex布局规则下该属性会让元素的最小宽度等于其内容的默认宽度，无法被压缩到更小的尺寸。
• CSS选择器与HTML id大小写不匹配：CSS中定义的是#gform（末尾f小写），但HTML内表单的id为gForm（末尾F大写），导致给表单设置的Flex属性完全未生效。
• #searchform设置了全局150px外边距，窗口宽度较小时左右边距会占用大量可视空间，进一步加剧横向溢出问题。
• 额外规范问题：img标签的CSS宽度属性width: 272缺少单位，属于不规范写法。

只需要修改对应CSS规则即可：

/* 修正搜索栏宽度规则 */
#sBar {
  border-radius: 25px;
  max-width: 534px; /* 替换原width:534px，最大宽度限制为534px */
  width: 100%; /* 窗口小于534px时占满可用宽度 */
  height: 34px;
  display: flex;
}

/* 修正输入框收缩限制 */
input[type="text"] {
  word-wrap: break-word;
  flex: 100%;
  outline: none;
  min-width: 0; /* 新增这行，覆盖默认min-width限制 */
}

/* 修正表单选择器大小写，补充Flex规则 */
#gForm { /* 把原#gform改为大写F，匹配HTML的id */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
}

/* 修正外层容器边距，避免溢出 */
#searchform {
  margin: 150px auto; /* 上下保留150px边距，左右自动居中 */
  padding: 0 20px; /* 新增左右内边距，避免小窗口下内容贴边 */
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
}

/* 补全图片宽度单位 */
img {
  height: 92px;
  width: 272px; /* 补全px单位 */
  flex-shrink: 0;
}

修改后输入框即可随窗口宽度正常收缩，不会出现横向滚动条。

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