Centering form with flex rows - css

Question

I have a form where every single row has display: flex. Each row has a label box with a fixed width and a field box which fit to his content. Now it looks like this:
What I want to achive is to shrink every row to the minimum content width and centering the form horizontally. Something like this:
I tried using inline-flex for rows but seems like parent becomes smaller than the total width of children.
Is there a way to achive it keeping flexbox for each row and without using transform: translate to align form horizontally?
Here is the code of the first image:
.form-container {
background-color: black;
padding: 5px;
color: white;
}
.form {
background-color: yellow;
padding: 5px;
}
.form-row {
display: flex;
background-color: silver;
padding: 5px 0;
margin: 5px 0;
}
.form-row-label {
flex: 0 0 200px;
background-color: cornflowerblue;
}
.form-row-field {
flex: 0 1 0;
background-color: orangered;
white-space: nowrap;
}
<div class="form-container">
<div class="form">
<div class="form-row">
<div class="form-row-label">
label 1
</div>
<div class="form-row-field">
field 1 xxxxxxxxxxxxxxxxx
</div>
</div>
<div class="form-row">
<div class="form-row-label">
label 2
</div>
<div class="form-row-field">
field 2 xxxx
</div>
</div>
<div class="form-row">
<div class="form-row-label">
label 3
</div>
<div class="form-row-field">
field 3 xxxxxxxxxx
</div>
</div>
</div>
</div>
And here is the jsfiddle.
Thanks

Answer 1

Here is an idea:
.form-container {
background-color: black;
padding: 5px;
color: white;
text-align:center; /* Center the inline-block*/
}
.form {
background-color: yellow;
padding: 5px;
display:inline-block; /* Use this to fit content */
}
.form-row {
display: flex;
background-color: silver;
padding: 5px 0;
margin: 5px 0;
}
.form-row-label {
width: 200px;
flex-shrink:0; /* Avoid the content to shrink*/
background-color: cornflowerblue;
text-align:left;
}
.form-row-field {
flex-shrink:0;
background-color: orangered;
}
<div class="form-container">
<div class="form">
<div class="form-row">
<div class="form-row-label">
label 1
</div>
<div class="form-row-field">
field 1 xxxxxxxxxxxxxxxxx
</div>
</div>
<div class="form-row">
<div class="form-row-label">
label 2
</div>
<div class="form-row-field">
field 2 xxxx
</div>
</div>
<div class="form-row">
<div class="form-row-label">
label 333
</div>
<div class="form-row-field">
field 3 xxxxxxxxxx
</div>
</div>
</div>
</div>

Answer 2

Here is an idea using display:inline-flex and flex-direction:column in the .form class with text-align: center in the parent class. Also you will need to use width: 200px in label instead of flex-basis:200px
.form-container {
background-color: black;
padding: 5px;
color: white;
text-align: center;
}
.form {
background-color: yellow;
padding: 5px;
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.form-row {
display: flex;
background-color: silver;
padding: 5px 0;
margin: 5px 0;
}
.form-row-label {
width: 200px;
background-color: cornflowerblue;
}
.form-row-field {
flex: 0 1 0;
background-color: orangered;
white-space: nowrap;
}
<div class="form-container">
<div class="form">
<div class="form-row">
<div class="form-row-label">
label 1
</div>
<div class="form-row-field">
field 1 xxxxxxxxxxxxxxxxx
</div>
</div>
<div class="form-row">
<div class="form-row-label">
label 2
</div>
<div class="form-row-field">
field 2 xxxx
</div>
</div>
<div class="form-row">
<div class="form-row-label">
label 3
</div>
<div class="form-row-field">
field 3 xxxxxxxxxx
</div>
</div>
</div>
</div>

Answer 3

If you want to center the yellow box within the black box, you should only add below code to your code:
.form {
background-color: yellow;
padding: 5px;
display: flex;
width: 650px;
max-width: 650px;
flex-direction: column;
margin: 0 auto;
}
.form-row-label {
flex: 0 0 60%;
background-color: cornflowerblue;
}
I think it will help you a little bit.