Расхождение Flex-box между Chrome и Firefox

Question

У меня есть таблица с двумя столбцами. Я использую гибкие столбцы, чтобы центр второго столбца располагался на каждом из элементов первых столбцов.

Проблема в том, что FireFox и Chrome не отображаются одинаково. Я должен установить высоту в 1px в Chrome, чтобы растянуть один делитель до 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.