Browsers render multiple tbody height differently - html

Question

Here is an example, containing a table element with multiple tbody elements
https://jsfiddle.net/aoLbuafx/
HTML
<table>
<tbody class="tbody1">
<tr>
<td>Eka</td>
<td>Toka</td>
<td>Kolmas</td>
</tr>
</tbody>
<tbody class="tbody2">
<tr>
<td>Sisältö</td>
<td>Sisältö</td>
<td>Sisältö</td>
</tr>
<tr>
<td>Sisältö</td>
<td>Sisältö</td>
<td>Sisältö</td>
</tr>
<tr>
<td>Sisältö</td>
<td>Sisältö</td>
<td>Sisältö</td>
</tr>
</tbody>
<tbody class="tbody3">
<tr>
<td>Eka</td>
<td>Toka</td>
<td>Kolmas</td>
</tr>
</tbody>
</table>
CSS
table {
height: 500px;
}
.tbody1 {
background-color: red;
}
.tbody2 {
background-color: blue;
}
.tbody3 {
background-color: green;
}
The end results is that browsers render this table very differently. Firefox shares the total height between tbody elements equally, while Chrome prefers to use the first tbody to fill the available space.
Is is possible to help Chrome render the table as Firefox does, sharing the height between tbody elements, while keeping the table height fixed?
Sidenote: Changing the first tbody to thead and the last tbody to tfoot helps a bit, since in this case Chrome prefers the one and only tbody element to fill the available space. Still, it is not what I want.

Answer 1

That's interesting behavior. Without using Javascript to count children and set height accordingly, this can be done with a flexboxes (as can many things).
Here's the HTML:
<div class="table">
<div class="wrap tbody1">
<div class="cell">Eka</div>
<div class="cell">Toka</div>
<div class="cell">Kolmas</div>
</div>
<div class="wrap tbody2">
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
</div>
<div class="wrap tbody2">
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
</div>
<div class="wrap tbody2">
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
</div>
<div class="wrap tbody3">
<div class="cell">Eka</div>
<div class="cell">Toka</div>
<div class="cell">Kolmas</div>
</div>
</div>
And the CSS:
.wrap {
display: flex;
flex: 1;
justify-content: space-between;
}
.cell {
display: flex;
width: 100%;
padding: 5px;
}
.table {
height: 500px;
display: flex;
flex-direction: column;
}
Here's a JSFiddle with some added styles. The property in the flexbox that allows heights to be evening out is the flex:1 on .wrap.