How can I widen my input element within a flex container? - html

Question

I'm trying to make a login page (username and password). So far, I have managed to construct it, but one problem I'm now facing is that the username input and password input, as well as the login button are only at half the width of the table I put them in. How can I make them go to the maximum width of the table, and still scale according to the size of the client's screen?
Here are my codes:
.login_table {
display: flex;
padding: 0.5em;
border: 2px solid #46a7e0;
width: 50%;
}
.login_row {
display: flex;
}
.login_cell {
display: flex;
padding: 0.5em;
}
<form action="/Login/Login" method="POST">
<div style="text-align:center">
<div class="login_table">
<div class="login_row">
<div class="login_cell">
Username:
</div>
<div class="login_cell">
<input class="form-control" name="username" />
</div>
</div>
<div class="login_row">
<div class="login_cell">
Password:
</div>
<div class="login_cell">
<input class="form-control" name="password" />
</div>
</div>
<div class="login_row">
<div class="login_cell"></div>
<div class="login_cell" style="text-align: right">
<input type="submit" value="Login" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</form>

Answer 1

Use flex: 1;, or flex-grow: 1;. You can run the code below to see the result.
.login_table {
display: flex;
flex-direction: column;
padding: 0.5em;
border: 2px solid #46a7e0;
}
.login_row {
display: flex;
padding: 0.5em;
}
.login_row .login_cell:first-of-type {
width: 90px;
text-align: left;
padding: 0 .5em;
}
.login_row .login_cell:last-of-type {
flex: 1;
display: flex;
}
input {
width: 100%;
}
<form action="/Login/Login" method="POST">
<div style="text-align:center">
<div class="login_table">
<div class="login_row">
<div class="login_cell"> Username:</div>
<div class="login_cell">
<input class="form-control" name="username" />
</div>
</div>
<div class="login_row">
<div class="login_cell">Password:</div>
<div class="login_cell">
<input class="form-control" name="password" />
</div>
</div>
<div class="login_row">
<div class="login_cell"></div>
<div class="login_cell">
<input type="submit" value="Login" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</form>

Answer 2

1) Remove the width: 50% in .login_table
.login_table {
width: 50%; // Remove this to get full width
}
2) You can either use media queries for small screens or flex-wrap: wrap to wrap element when they don't fit in the container.
.login_table {
display: flex;
flex-wrap: wrap;
padding: 0.5em;
border: 2px solid #46a7e0;
}
.login_row {
display: flex;
}
.login_cell {
display: flex;
padding: 0.5em;
}
<form action="/Login/Login" method="POST">
<div style="text-align:center">
<div class="login_table">
<div class="login_row">
<div class="login_cell">
Username:
</div>
<div class="login_cell">
<input class="form-control" name="username" />
</div>
</div>
<div class="login_row">
<div class="login_cell">
Password:
</div>
<div class="login_cell">
<input class="form-control" name="password" />
</div>
</div>
<div class="login_row">
<div class="login_cell"></div>
<div class="login_cell" style="text-align: right">
<input type="submit" value="Login" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</form>

Answer 3

When you use flex, by default all the child element will forcefully take horizontal position. As you want your username, password and login button full width and show them in row. So you must you flex-direction: column;
Have a look at the this code and run it.
.login_table {
--gap: 1em;
display: flex;
padding: 0.5em;
border: 2px solid #46a7e0;
flex-direction: column;
box-sizing: border-box;
row-gap: var(--gap);
}
.login_table :is(input, button){
display: block;
width: 100%;
}
.login_table :is(input, button) {
display: block;
width: 100%;
box-sizing: border-box;
}
.login_row {
display: grid;
column-gap: var(--gap);
align-items: center;
grid-template-columns: 75px 1fr;
}
<form action="/Login/Login" method="POST">
<div style="text-align:center">
<div class="login_table">
<div class="login_row">
<div class="login_cell"> Username:</div>
<div class="login_cell">
<input class="form-control" name="username" />
</div>
</div>
<div class="login_row">
<div class="login_cell">Password:</div>
<div class="login_cell">
<input class="form-control" name="password" />
</div>
</div>
<div class="login_row">
<div class="login_cell"></div>
<div class="login_cell">
<input type="submit" value="Login" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</form>