Question

我们有一个嵌套flexbox的场景，其父级是一个表。虽然在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;

}

Answer 1

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

IE11与父表嵌套了flexbox问题

1 个答案: