屏幕缩小时输入元素溢出容器，尝试display:block和flex-wrap仍未解决

先拆解你当前代码里的核心问题：

1. flex-wrap: wrap 只对设置了 display: flex 的容器生效，给子元素单独加这个属性完全无效。
2. .travel-container 使用 50vw 作为宽度，但小屏幕下 padding: 30px 会让容器实际宽度超出视口（默认盒模型是content-box，vw仅计算内容宽度）。
3. 输入元素本身可能带固定宽度，或未限制最大宽度，导致超出容器范围。

以下是具体修复方案：

1. 修正容器盒模型，让padding包含在宽度内 #

.travel-container {
  background-color: rgb(252, 252, 252);
  width: 50vw;
  min-height: 60vh;
  padding: 30px;
  border-radius: 10px;
  box-sizing: border-box; /* 添加该行，让padding算入容器总宽度 */
}

2. 小屏幕下调整容器宽度，适配视口 #

@media (max-width: 40rem) {   
  .travel-container {
    width: 90vw; /* 改成适合小屏的宽度，比如90vw避免贴边 */
  }
}

3. 强制输入元素不超出容器 #

给所有输入类元素（input、textarea等）添加样式，限制其最大宽度：

.travel-container input,
.travel-container textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; /* 确保输入框的padding/border不会撑宽元素 */
}

如果你的容器原本是flex布局（不然不会用到flex-wrap），要把flex属性加在容器上而非子元素：

.travel-container {
  /* 原有样式 */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 可选，给子元素添加间距 */
}

完成以上调整后，小屏幕下容器会适配视口宽度，输入元素也会自动缩放到容器范围内，不会再出现溢出问题。

内容的提问来源于stack exchange，提问作者Joël