Nested Flexbox inside a table causes issue

If we have a nested flexbox and a table in its ancestral hierarchy it causes the table to keep expanding and flexbox too keeps expanding as a result.

For instance if we have something like-

<table style="border:1px solid red;width:50%";>
     <tr>
       <td>
            <div class="layout flex">
             <div class="con flex">
               <label>First name</label>
               <div class="field-item"><input /></div>
              </div>
              <div class="con flex">
               <label>Last name</label>
                 <div class="field-item"><input /></div>
              </div>
              <div class="con flex">
               <label>Address 1</label>
                 <div class="field-item"><input /></div>
              </div>
              <div class="con flex">
               <label>Address 2</label>
                  <div class="field-item"><input /></div>
              </div>
              <div class="con flex">
               <label>City</label>
                  <div class="field-item"><input /></div>
              </div>
              <div class="con flex">
               <label>State</label>
                 <div class="field-item"><input /></div>
              </div>
            </div>
       </td>
      </tr>
    </table>

css-

* {
  box-sizing: border-box;
}



.layout.flex {
    display: flex;
  flex-flow:row wrap;
  width:100%;
}

.con {
  width:auto;
    display: flex;
  flex-direction:column;

}

label {
  width: 120px;
}

.field-item {
  flex: 1;

}

So when we have something like this we face an issue in IE-11 

We cannot remove the table due to some reasons and cannot add table-layout:fixed. 

This issue seems to have been fixed in Edge. 

Is there any solution to this ?