如何让搜索栏填满容器末端并保持响应式适配？

问题根源在于你给.container form设置了position: absolute，这会让表单脱离正常文档流，不再继承父容器.container的宽度，导致它只能根据内部内容撑开，所以才只显示一半。手动设置固定百分比宽度后，因为绝对定位的参考系不是父容器，屏幕缩放时自然会出现溢出问题。

直接按下面的修改调整CSS即可解决：

body {
  width: 100%;
  height: 100vh;
  background: rgb(240, 239, 243);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  width: 375px;
  height: 520px;
  background: white;
  border-radius: 15px;
  box-shadow: 4px 4px 30px rgb(0, 0, 0, 0.06);
  padding: 20px;
  overflow-y: scroll;
}

.container::-webkit-scrollbar {
  display: none;
}

.container form {
  border: 1px solid rgb(82, 74, 235);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* 移除绝对定位，让表单回到文档流 */
  width: 100%; /* 让表单填满容器的可用宽度 */
  padding: 0 8px; /* 给搜索图标预留空间 */
}

.container form i {
  margin-right: 8px; /* 让图标和输入框保持间距 */
  color: #666;
}

.container form input {
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 10px;
}

修改说明： #

• 移除position: absolute：让表单回归正常文档流，宽度会受父容器.container的约束，不会脱离布局上下文。
• 添加width: 100%：确保表单填满父容器的内容宽度（容器自带的padding:20px已经预留了左右空间，所以100%不会超出容器边界）。
• 补充图标间距和表单内边距：优化视觉布局，避免图标和输入框内容挤在一起，提升交互体验。

修改后搜索栏会自适应容器宽度，屏幕缩放时也不会超出容器范围，同时保持和容器的布局一致性。

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