Html 为什么我的输入没有占用flexbox容器的整个宽度

我不明白为什么我的前三个输入没有占据全部宽度，有人能帮我吗？或者给我一个更好的整体设置，这样 反应更快

这是我的联系方式scss：

&\uuuu联系方式{
显示器：flex；
宽度：100%；
对正内容：空间均匀；
身高：50%；
弯曲方向：立柱；
填充：3rem；
&__输入行{
宽度：100%；
身高：25%；
显示器：flex；
对齐项目：居中；
对正内容：空间均匀；
&__输入框{
身高：100%；
显示器：flex；
调整项目：灵活启动；
证明内容：中心；
弯曲方向：立柱；
柔性生长：1；
&标签{
字体大小：1.5rem；
保证金底部：1.5雷姆；
}
&输入{
高度：3雷姆；
填充：1.5雷姆；
宽度：90%；
字体大小：3rem；
边框：0.15rem实心#e51010；
}
}
}
&标签{
文本对齐：左对齐；
字体大小：1.5rem；
保证金底部：1.5雷姆；
边缘顶部：3rem；
}
&文本区{
填充：1.5雷姆；
字体大小：3rem；
调整大小：无；
最小高度：60%；
宽度：自动；
边框：0.15rem实心#e51010；
}
}

接触
跟我们谈谈！
全名
主题
电子邮件
消息
发送

存在一个间隙，因为您在输入上指定了一个宽度：90%，但他们的容器并不关心这一点，我只是填充他们的flex父级的宽度。无论如何，输入元素的宽度总是很棘手

您可以做什么：

• 删除输入上的宽度规则
• 在_输入框上删除flex grow规则，设置flex:0 1 33%以限制宽度（并创建间隙），并删除align items规则，以便拉伸输入
• 设置对齐内容：输入行上的空格

比如：

---

下面是一个经过编辑的示例：

您也可以共享html代码吗？@Manjuboyz刚刚添加了它！注意：

标记不使用也不需要结束斜杠，而且在HTML中从未使用过。@Rob抱歉忘了提到我使用的是Vue.js，它应用了结束斜杠automatically@squish在代码段中添加代码时，代码给了我不同的设计！你有没有办法为我们重现这个问题？我代表您创建了一个代码段，这就是它的外观！太棒了，非常感谢。现在都开始工作了！元素的宽度总是让我绊倒。再次感谢

&__input-row {
  width: 100%;
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &__input-box {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 0 1 33%;

    & label {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }

    & input {
      height: 3rem;
      padding: 1.5rem;
      font-size: 3rem;
      border: 0.15rem solid #e51010;
    }
  }
}