Size centered box to content (including form fields) - css

Question

How can I have a box that's automatically sized to its content (including form fields) and centered without using role="presentation" tables for layout? (I'm trying to modernize, and to reduce markup clutter.)
As you can see, I've got most of it (I think), but the form fields stick out of their container, which I suspect is down to fundamental errors in my CSS.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.app {
height: 100%;
padding-top: 20px;
}
.welcome {
text-align: center;
}
/* Center the box horizontally */
.center-wrapper {
display: flex;
justify-content: center;
}
/* The box I'm trying to center and size to content */
.login {
display: inline-block;
border: 1px solid black;
padding: 8px;
line-height: 1.8rem;
}
.login .fields {
margin-top: 8px;
display: grid;
grid-template-columns: 40% auto;
}
<div class="app">
<div class="center-wrapper">
<div class="login">
<div class="welcome"><strong>Welcome!</strong></div>
<div class="welcome">Please sign in</div>
<div class="fields">
<label for="user-email">Email address:</label>
<input id="user-email" type="email" size="25" autofocus>
<label for="user-pass">Password:</label>
<input id="user-email" type="password" size="25">
</div>
</div>
</div>
</div>
The form fields escape their container:
I don't want to assign fixed sizes to the elements and just make sure they fit, I want the box sized to its content and want it to handle the user zooming, different device sizes, etc.
The below gives the effect I'm looking for (very basically), but it uses a presentation table:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.app {
height: 100%;
padding-top: 20px;
}
.welcome {
text-align: center;
}
/* Center the box horizontally */
.center-wrapper {
display: flex;
justify-content: center;
}
/* The box I'm trying to center and size to content */
.login {
display: inline-block;
border: 1px solid black;
padding: 8px;
line-height: 1.8rem;
}
.login th {
font-weight: normal;
}
<div class="app">
<div class="center-wrapper">
<table class="login" role="presentation">
<tbody>
<tr>
<th colspan="2"><strong>Welcome!</strong></th>
</tr>
<tr>
<th colspan="2">Please sign in</th>
</tr>
<tr>
<td>
<label for="user-email">Email address:</label>
</td>
<td>
<input id="user-email" type="email" size="25" autofocus>
</td>
</tr>
<tr>
<td>
<label for="user-pass">Password:</label>
</td>
<td>
<input id="user-email" type="password" size="25">
</td>
</tbody>
</table>
</div>
</div>
Aside from not being great semantically (it's not really a table), I don't like the markup burden.

Answer 1

Either use 1fr auto so that the input will take the needed space and then the label will span the free space (you can consider some gap too)
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.app {
height: 100%;
padding-top: 20px;
}
.welcome {
text-align: center;
}
/* Center the box horizontally */
.center-wrapper {
display: flex;
justify-content: center;
}
/* The box I'm trying to center and size to content */
.login {
/*display: inline-block; you don't need this */
border: 1px solid black;
padding: 8px;
line-height: 1.8rem;
}
.login .fields {
margin-top: 8px;
display: grid;
grid-template-columns: 1fr auto;
column-gap:10px;
}
<div class="app">
<div class="center-wrapper">
<div class="login">
<div class="welcome"><strong>Welcome!</strong></div>
<div class="welcome">Please sign in</div>
<div class="fields">
<label for="user-email">Email address:</label>
<input id="user-email" type="email" size="25" autofocus>
<label for="user-pass">Password:</label>
<input id="user-email" type="password" size="25">
</div>
</div>
</div>
</div>
Or consider 40% minmax(0,1fr) which will force the input to shrink to the remaining space
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.app {
height: 100%;
padding-top: 20px;
}
.welcome {
text-align: center;
}
/* Center the box horizontally */
.center-wrapper {
display: flex;
justify-content: center;
}
/* The box I'm trying to center and size to content */
.login {
/*display: inline-block; you don't need this */
border: 1px solid black;
padding: 8px;
line-height: 1.8rem;
}
.login .fields {
margin-top: 8px;
display: grid;
grid-template-columns: 40% minmax(0,1fr);
}
<div class="app">
<div class="center-wrapper">
<div class="login">
<div class="welcome"><strong>Welcome!</strong></div>
<div class="welcome">Please sign in</div>
<div class="fields">
<label for="user-email">Email address:</label>
<input id="user-email" type="email" size="25" autofocus>
<label for="user-pass">Password:</label>
<input id="user-email" type="password" size="25">
</div>
</div>
</div>
</div>
Related: Why does minmax(0, 1fr) work for long elements while 1fr doesn't?
The first one will not shrink the inputs while the second one will do due to the use of percetange that is based on the initial width of the input and label.
Here is a before/after to see the percentage effect
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.app {
height: 100%;
padding-top: 20px;
}
.welcome {
text-align: center;
}
/* Center the box horizontally */
.center-wrapper {
display: flex;
justify-content: center;
}
/* The box I'm trying to center and size to content */
.login {
/*display: inline-block; you don't need this */
border: 1px solid black;
padding: 8px;
line-height: 1.8rem;
}
.login .fields {
margin-top: 8px;
display: grid;
}
<div class="app">
<div class="center-wrapper">
<div class="login">
<div class="welcome"><strong>Welcome!</strong></div>
<div class="welcome">Please sign in</div>
<div class="fields" style="grid-template-columns:auto auto">
<label for="user-email">Email address:</label>
<input id="user-email" type="email" size="25" autofocus>
<label for="user-pass">Password:</label>
<input id="user-email" type="password" size="25">
</div>
<div class="fields" style="grid-template-columns:40% auto">
<label for="user-email">Email address:</label>
<input id="user-email" type="email" size="25" autofocus>
<label for="user-pass">Password:</label>
<input id="user-email" type="password" size="25">
</div>
<div class="fields" style="grid-template-columns:40% minmax(0,1fr)">
<label for="user-email">Email address:</label>
<input id="user-email" type="email" size="25" autofocus>
<label for="user-pass">Password:</label>
<input id="user-email" type="password" size="25">
</div>
</div>
</div>
</div>
The 40% was based on the width of the text and the input considering that both are set to auto which will logically create an overflow since (in your case) the 40% is bigger that the initial width of the label.
A longer text will produce a different result:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.app {
height: 100%;
padding-top: 20px;
}
.welcome {
text-align: center;
}
/* Center the box horizontally */
.center-wrapper {
display: flex;
justify-content: center;
}
/* The box I'm trying to center and size to content */
.login {
/*display: inline-block; you don't need this */
border: 1px solid black;
padding: 8px;
line-height: 1.8rem;
}
.login .fields {
margin-top: 8px;
display: grid;
}
<div class="app">
<div class="center-wrapper">
<div class="login">
<div class="welcome"><strong>Welcome!</strong></div>
<div class="welcome">Please sign in</div>
<div class="fields" style="grid-template-columns:auto auto">
<label for="user-email">Email address:</label>
<input id="user-email" type="email" size="25" autofocus>
<label for="user-pass">very very long label here</label>
<input id="user-email" type="password" size="25">
</div>
<div class="fields" style="grid-template-columns:40% auto">
<label for="user-email">Email address:</label>
<input id="user-email" type="email" size="25" autofocus>
<label for="user-pass">very very long label here</label>
<input id="user-email" type="password" size="25">
</div>
<div class="fields" style="grid-template-columns:40% minmax(0,1fr)">
<label for="user-email">Email address:</label>
<input id="user-email" type="email" size="25" autofocus>
<label for="user-pass">very very long label here</label>
<input id="user-email" type="password" size="25">
</div>
</div>
</div>
</div>
In the above, the label will shrink because 40% is smaller than the initial width of the label and the input will get bigger.
Concerning the first case, using 1fr auto is also the same as using auto auto because in your case the grid is a shrink to fit element (a flex item) so the content will define its width. The remaining space after setting the input to auto will simply be the initial width of the label.