子弹性项目不伸展父级的全宽

Question

我尝试使用flexboxes和table重新创建表单，但是遇到了一个格式问题，其中子flex项目不会伸展以填充父级的整个宽度。

这是我的HTML / CSS：

＆＃13;

＆＃13;

.container {
  display: flex;
  /* or inline-flex */
  display: -webkit-flex;
  flex-direction: row;
  width: 100%;
  padding: 1em 0;
}

.left_col {
  display: flex;
  width: 5%;
}

.left_col .number {
  text-align: center;
  font-size: 400%;
  font-weight: bold;
}

.right_col {
  display: flex;
  flex: 2;
  margin-left: 10px;
  width: 95%;
}

.field {
  width: 100%;
}

.field td.cell {
  text-align: center;
  border: 1px solid #dddddd;
  padding: 8px;
}

＆＃13;

<div class="container">
  <div class="left_col">
    <p class="number">2</p>
  </div>

  <div class="right-col">
    <p>Fill in identifying information concerning the employee.</p>
    <table class="field">
      <tr>
        <td class="cell" style="width: 50%;">
          <label>Name $[SP]<i>(last, first, middle)</i></label>
          <input class="sf2817" type="text" id="Full_Name" name="Full_Name" style="background-color:#dddddd" value="${jvar_full_name}" readonly="readonly" />
        </td>
        <td class="cell" style="width:23%;">
          <label>Date of birth$[SP] <i>(mm/dd/yyyy)</i></label>
          <input class="sf2817" type="text" id="dob" name="dob" style="background-color:#dddddd" value="${jvar_date_of_birth}" readonly="readonly" />
        </td>
        <td class="cell" style="width:27%;">
          <label>Social Security Number</label>
          <input class="sf2817" type="text" id="ssn" name="ssn" style="background-color:#dddddd" value="${jvar_ssn}" readonly="readonly" />
        </td>
      </tr>
    </table>
    <table class="field">
      <tr>
        <td class="cell" style="width: 32%;">
          <label>Employing department or agency</label>
          <input class="sf2817" type="text" id="department" name="department" style="background-color:#dddddd" value="${jvar_job_agency}" readonly="readonly" />
        </td>
        <td class="cell" style="width:18%;">
          <label>OWCP claim number, if applicable</label>
          <input class="sf2817" type="text" id="owcp" name="owcp" />
        </td>
        <td class="cell" style="width:28%;">
          <label>Location of department of agency where you work $[SP] <i>(city, state, ZIP code)</i></label>
          <input class="sf2817" type="text" id="dept_location" name="dept_location" style="background-color:#dddddd" value="${jvar_job_location}" readonly="readonly" />
        </td>
        <td class="cell" style="width:22%;">
          <label>Daytime telephone number$[SP] <i>(including area code)</i></label>
          <input class="sf2817" type="text" id="phone" name="phone" style="background-color:#dddddd" value="${jvar_mobile_phone}" readonly="readonly" />
        </td>
      </tr>
    </table>
  </div>
</div>

<hr style="height:1px;border:none;color:#000;background-color:#000; margin:0;" />

<div class="container">
  <div class="left_col">
    <p class="number">3</p>
  </div>

  <div class="right-col">
    <p><b>To elect or retain Basic,</b>$[SP] sign and date below. If you do not sign for Basic, you (or your assignee) may not elect or retain any form of optional insurance. If you do not want any insurance at all, skip to Section 5.</p>
    <table class="field">
      <tr style="border-top:1px solid black;">
        <td class="cell" style="width: 15%; background-color: #ddd; border-bottom:1px solid black" rowspan="2">
          <font size="4"><b>Basic</b></font>
        </td>
        <td class="cell" style="width: 85%; text-align:left;" colspan="2">
          <p><b>I want Basic.</b>$[SP] I authorize deductions to pay my share of the cost. (Basic may be provided without cost to U.S. Postal employees.)</p>
        </td>
      </tr>
      <tr>
        <td class="cell" style="width: 60%; border-bottom:1px solid black">
          <label><b>SIGNATURE</b>$[SP]<i>Do not print. Only you or your assignee may sign. Signature by guardians, conservators or through a power of attorney are <b>not</b>$[SP] valid</i></label>
          <i class="fa fa-caret-right" style="font-size:24px"></i>$[SP]$[SP]<input class="sf2817" type="text" id="basic_signature" name="basic_signature" style="background-color:#dddddd" value="/s/ ${jvar_full_name}" readonly="readonly" />
        </td>
        <td class="cell" style="width:40%; border-bottom:1px solid black">
          <label>Date $[SP]<i>(mm/dd/yyyy)</i></label>
          <input class="sf2817" type="text" id="basic_signature_date" name="basic_signature_date" style="background-color:#dddddd" readonly="readonly" />
        </td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

从这段代码中，我得到的是：

第3节中的表格由于某种原因并没有拉伸其容器的整个宽度，我无法弄清楚原因。有什么建议吗？