Flex on parent div affecting flex of child buttons - html

Question

I have two buttons that I want side by side with a little space between them:
I originally did this by using display: flex; and justify-content: space-between;.
But, I want the block that wraps the two buttons to be horizontally and vertically centered on a full page. Therefore, I wrapped everything in a parent div and applied display: flex; justify-content: center; align-items: center to the parent div. However, this results in the spacing of the buttons being reset.
How do I get the overall block to be horizontally and vertically centered on the page while also keeping the spacing of the buttons?
The code is here and here is a Fiddle.
HTML
<div class="form-wrap">
<div class="button-wrap">
<button class="button">
Button 1
</button>
<button class="button">
Button 2
</button>
</div>
</div>
CSS
.form-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px solid gray;
max-width: 100vw;
width: 100vw;
max-height: 100vh;
height: 100vh;
}
.button-wrap {
display: flex;
justify-content: space-between;
max-width: 200px;
}
.button {
padding: 20px;
border: 1px solid gray;
cursor: pointer;
}
.button:hover {
background: lightyellow;
}

Answer 1

You can simply add a margin to your button elements.
.form-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px solid gray;
max-width: 100vw;
width: 100vw;
max-height: 100vh;
height: 100vh;
}
.button-wrap {
display: flex;
justify-content: space-around;
max-width: 200px;
}
.button {
padding: 20px;
border: 1px solid gray;
cursor: pointer;
margin:0 15px;
}
.button:hover {
background: lightyellow;
}
<div class="form-wrap">
<div class="button-wrap">
<button class="button">
Button 1
</button>
<button class="button">
Button 2
</button>
</div>
</div>
Solution #2: Or you can set a width to your button-wrap element that is larger than the total width of the 2 buttons, then you will have a space between the 2 buttons, like below snippet:
.form-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px solid gray;
max-width: 100vw;
width: 100vw;
max-height: 100vh;
height: 100vh;
}
.button-wrap {
display: flex;
justify-content: space-around;
width:250px;max-width: 250px;
}
.button {
padding: 20px;
border: 1px solid gray;
cursor: pointer;
}
.button:hover {
background: lightyellow;
}
<div class="form-wrap">
<div class="button-wrap">
<button class="button">
Button 1
</button>
<button class="button">
Button 2
</button>
</div>
</div>