html - IE11 嵌套 flexbox 问题与父表

Question

我们有一个嵌套 flexbox 的场景，它的父级是一个表。尽管在 chrome 中 trhis 的行为符合预期，但在 IE-11 中，flexboxes 不会换行。

https://jsfiddle.net/arnabgh/qg5rojc9/3/

我们不能使表格布局:固定。还有其他更好的方法来解决这个问题吗？

        <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;

}

Answer 1

水平布局仅取决于表格的宽度和列的宽度，而不是单元格的内容，在您的示例中，您的表格只有一列 (td)。 所以如果你想使用 layout-table: fixed 你必须定义不止一个“td”并且测试只是给它们不同的宽度