Html 输入框形状受父div限制

我想实现类似于这张照片的我的登录区域的外观

我目前的HTML和CSS如下所示： HTML

我的目标是根据输入/登录按钮的形状将此输入区域的样式设置为一个圆角矩形

我遇到的问题有两个：

我似乎无法将输入区域的大小限制为父容器。它们运行在父分区之外

我似乎无法让输入区域接受父容器的受限边界半径

是否必须为圆角边框分别设置每个元素的样式，以及如何将用户名和密码区域限制为父div的宽度

---

如果有“更好”的方法，我愿意接受建议。

因为您已经在使用flexbox，所以输入元素的大小似乎正确地符合父级的限制，没有任何问题

关于第二个问题，将

溢出：隐藏
添加到元素
。InputBox
将起作用

见下面的概念证明：


正文{
背景色：#ccc；
}
罗吉纳雷亚酒店{
保证金：自动；
垫顶：8%；
显示器：flex；
弯曲方向：立柱；
身高：100%；
最大宽度：400px；
证明内容：中心；
}
.输入框{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
边界半径：15px；
背景颜色：蓝色；
溢出：隐藏；
}
.输入框部{
显示器：flex；
证明内容：中心；
}
输入{
柔性生长：1；
边界：无；
高度：35px；/*仅用于演示*/
}

帐户登录

登录


<div className="loginArea">
    <p>Account Login</p>
    <div className="inputBoxes">
      <div>
        <input type="text" placeholder="Username" />
        <input type="password" placeholder="Password" />
      </div>
      <div>
        <p>Sign In</p>
      </div>
    </div>
  </div>

      .loginArea {
  margin: auto;
  padding-top: 8%;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 400px;
  justify-content: center;
}

.inputBoxes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 15px;
  background-color: blue;
}

.inputBoxes div {
  display: flex;
  justify-content: center;
}

input {
  flex-grow: 1;
  border: none;
}