Height of all elements the same in Firefox but not Chrome - html

Question

I would like to have all my boxes the same height
I used the CSS display: flex and it works fine for the first block but not his child
It works fine on Firefox but not on chrome
I found the row-eq-height class on getbootstrap but it isn't better on chrome
my page on chrome
my page on firefox
I have a div class row-eq-height then a col-md-4 and a panel
The panel height don't want to change
the code :
<div class="row-eq-height">
<div class="col-md-4">
<div class="panel panel-default no-padding server-box">
<!-- Default panel contents -->
<div class="panel-heading title-box">Regrowth</div>
<!-- Table -->
<table class="table server-table">
<tbody>
<tr>
<th>Adresse IP</th>
<td>#</td>
</tr>
<tr>
<th>Joueurs en ligne</th>
<td class="progress-bar-wrap">
<div>
<span style="width: 0%;"></span>
<span class="progress-bar-content">0
/50</span>
</div>
</td>
</tr>
<tr>
<th>Statut</th>
<td><img src="#" alt="status"></td>
</tr>
<tr>
<th>Ms/Tps</th>
<td class="good-tps">2.8 ms / 20 tps</td>
</tr>
<tr class="heads-tr">
<td class="heads-td">
<div class="heads">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default no-padding server-box">
<!-- Default panel contents -->
<div class="panel-heading title-box">InfinityHard</div>
<!-- Table -->
<table class="table server-table">
<tbody>
<tr>
<th>Adresse IP</th>
<td>#</td>
</tr>
<tr>
<th>Joueurs en ligne</th>
<td class="progress-bar-wrap">
<div>
<span style="width: 6%;"></span>
<span class="progress-bar-content">3
/50</span>
</div>
</td>
</tr>
<tr>
<th>Statut</th>
<td><img src="#" alt="status"></td>
</tr>
<tr>
<th>Ms/Tps</th>
<td class="#">7.1 ms / 20 tps</td>
</tr>
<tr class="heads-tr">
<td class="heads-td">
<div class="heads">
<img src="#" alt="Melkutus" data-toggle="tooltip"
data-trigger="hover" data-placement="bottom" title="Melkutus">
<img src="#"
data-toggle="tooltip" data-trigger="hover" data-placement="bottom"
title="FortunateTrollz">
<img src="#" alt="Asseo" data-toggle="tooltip"
data-trigger="hover" data-placement="bottom" title="Asseo">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
and the css
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.panel-container .server-box {
height: 100%;
}
thanks to people who will understand and answer me !