表单输入框超出容器边界 求非固定像素解决方案

我看了你的代码，问题出在翻转后的表单区域里，输入框没有被正确约束在容器内。不用固定像素宽度也能搞定，咱们来一步步调整：

问题根源 #

你的input元素没有设置宽度约束，默认宽度加上.back容器的边框、.form form的左右内边距，就导致输入框超出了容器范围。好在你已经全局设置了box-sizing: border-box，这正好可以用来让元素的宽高包含边框和内边距，不用再担心溢出问题。

解决方案 #

只需要给input加上宽度占满父容器的样式，同时优化一下表单的内边距设置（去掉没必要的!important，让样式更可控）：

修改input的CSS样式

input{
  width: 100%; /* 新增：让输入框占满父元素可用空间 */
  border-radius: 5px;
  outline-width: 0;
  border: 2px solid #a1887f;
  &:active,&:focus{
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  }
  &::placeholder{
    color:#a1887f;
    font-weight: 700;
    text-indent: 10px;
  }
}

调整.back内的表单样式

.back{
  transform:rotateY(180deg);
  position:absolute;
  bottom:0;
  left:0;
  border: 15px solid #a1887f;
  display:flex;
  justify-content:center;
  align-items:center;
  .form{
    form{
      padding:0 60px; /* 去掉!important，避免强制覆盖带来的维护问题 */
      width: 100%; /* 新增：让表单占满父容器的可用空间 */
    }
    a{
      position:relative;
      top:5px
    }
  }
}

为什么这样有效？ #

• width: 100%让输入框自动填满父元素（form）的可用空间，结合全局的box-sizing: border-box，输入框自身的边框会被包含在宽度内，不会额外撑开导致溢出。
• 给form也设置width:100%，确保它能利用.back容器扣除边框后的全部可用宽度，再配合左右内边距，既能保持美观的留白，又不会让输入框超出容器范围。

这样调整后，输入框就会乖乖待在容器里，而且是自适应的，完全不用依赖固定像素宽度~

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