Flexbox form width does not change - html

Question

I am trying to get a form's inputs to fill the container width but since I am using two flexboxes, it doesn't seem to allow me to set the width of the input boxes. Is there a way around this? I've tried using flex-shrink but got the same result.
What is the best way to set a form's width to fill its container using flexbox?
.sd-form-group {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
}
.sd-form-wrap {
display: flex;
}
.sd-form-group input[type=text],
.sd-form-group textarea {
width: 100%;
}
<form>
<div class="sd-form-group">
<div class="sd-form-wrap">
<div class="form-name form-first-name">
<label>First Name</label>
<br>
<input type="text">
</div>
<div class="form-name form-last-name">
<label>Last Name</label>
<br>
<input type="text">
</div>
</div>
<div class="form-email">
<label>Email</label>
<br>
<input type="text">
</div>
<div class="form-message">
<label>Message</label>
<br>
<textarea placeholder="Enter your comments, questions and feedback here." rows="4"></textarea>
</div>
<div class="form-checkbox">
<input type="checkbox">
<label>
Communications box
</label>
</div>
<input type="submit" value="Submit">
</div>
</form>

Answer 1

On the container, instead of flex-flow: column nowrap use row wrap.
On the items, force each one to occupy the full width of the row.
.sd-form-group {
display: flex;
/* flex-flow: column nowrap; */
flex-wrap: wrap; /* new */
justify-content: center;
/* align-items: flex-start; */ /* does nothing */
}
.sd-form-group > div {
flex: 0 0 100%; /* new */
}
.sd-form-wrap {
display: flex;
}
.sd-form-group input[type=text],
.sd-form-group textarea {
width: 100%;
}
<form>
<div class="sd-form-group">
<div class="sd-form-wrap">
<div class="form-name form-first-name">
<label>First Name</label>
<br>
<input type="text">
</div>
<div class="form-name form-last-name">
<label>Last Name</label>
<br>
<input type="text">
</div>
</div>
<div class="form-email">
<label>Email</label>
<br>
<input type="text">
</div>
<div class="form-message">
<label>Message</label>
<br>
<textarea placeholder="Enter your comments, questions and feedback here." rows="4"></textarea>
</div>
<div class="form-checkbox">
<input type="checkbox">
<label>
Communications box
</label>
</div>
<input type="submit" value="Submit">
</div>
</form>