Flexbox form width does not change

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>