Question

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

问题是FireFox和Chrome无法显示相同的内容。我必须在Chrome中将高度设置为1px才能将一个div拉伸到100％的高度。这使得FireFox中的表被捣毁。

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。

Chrome和Firefox之间的Flex-box差异

1 个答案: