input boxes shape restricted by parent div - html

Question

I'd like to achieve the look for my login area similar to this photo.
My current HTML and CSS are as follows:
HTML
<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>
CSS
.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;
}
My goal is to achieve the styling of this input area with respect to the shape of the inputs/sign in button as what look like one rectangle with rounded corners.
The problems I'm running into are two fold:
I can't seem to restrict the size of the input areas to the parent container. They run outside the parent div.
I can't seem to get the input areas to accept the restricted border-radius of the parent container.
Do I have to style each element individually for the rounded borders and how do I restrict the username and password areas to the width of the parent div?
If there are "better" approaches, I'm open to suggestions.

Answer 1

Since you're already using flexbox, the input element sizes seem to correctly fit inside the confines of the parents without any issue.
With regards to your second issue, adding overflow: hidden to the element .inputBoxes will work.
See proof-of-concept below:
body {
background-color: #ccc;
}
.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;
overflow: hidden;
}
.inputBoxes div {
display: flex;
justify-content: center;
}
input {
flex-grow: 1;
border: none;
height: 35px; /* Just for demo */
}
<div class="loginArea">
<p>Account Login</p>
<div class="inputBoxes">
<div>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
</div>
<div>
<p>Sign In</p>
</div>
</div>
</div>