Chrome 和 Firefox 之间的 Flex-box 差异

Question

我有一个有两列的表。我正在使用 flex 列，以便在每个第一列项目上都有第二列中心。

问题是 FireFox 和 Chrome 的显示不一样。我必须在 Chrome 中将高度设置为 1px 才能将一个 div 拉伸到 100% 高度。这使得FireFox中的表被砸烂了。

https://codepen.io/anon/pen/bJBWMK

SCSS

   @import "bourbon";

   table, td {
   border-collapse: collapse;
   border: 1px solid black;
   }
   .container {
   height: 1px;
   }
   .flex-wrap {
   @include display(flex);
   @include flex-direction(column);
   @include justify-content(space-around);
   height:100%;
   }

HTML

<table>
   <thead>
      <tr>
         <th>Col 1</th>
         <th>Col 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="container">
            <div class="flex-wrap">
               <div>
                  First Div <br/>
                  First Div <br/>
                  First Div <br/>
               </div>
               <div>
                  Second Div <br/>
                  Second Div <br/>
                  Second Div <br/>
               </div>
            </div>
         </td>
         <td class="container">
            <div class="flex-wrap">
               <div>Center First Div</div>
               <div>Center Second Div</div>
            </div>
         </td>
      </tr>
   </tbody>
</table>

Answer 1

我看不出这段代码可以工作的任何原因。您的 height: 1px 技巧是一个黑客。这是非标准化代码。因此浏览器的行为可能会有所不同。

如果您必须保持这种代码结构，请考虑从height: 1px 切换到min-height: 1px。