父表的 IE11 嵌套弹性框问题答案

【问题标题】：IE11 nested flexbox issue with parent table父表的 IE11 嵌套弹性框问题
【发布时间】：2016-05-19 03:24:54
【问题描述】：

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

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;

}

【问题讨论】：

这个问题缺乏上下文。你说你不能使用 table-layout:fixed - 但是还有其他可能的限制吗？想必您在表格中不止有这一个单元格？那么它是如何被允许或不允许影响的呢？（为什么首先有一个表格？至少你在这里显示的看起来不像表格数据......）

标签： html css flexbox internet-explorer-11

【解决方案1】：

水平布局仅取决于表格的宽度和列的宽度，而不是单元格的内容，在您的示例中，您的表格只有一列（td）。因此，如果您想使用 layout-table: fixed 您必须定义多个“td”并进行测试，只需给它们不同的宽度

【讨论】：

在 IE 中无论如何你都需要 flex 前缀