Different 'div' heights in Chrome and Firefox - html

Question

I have a table whose cells contain div elements with different content, so they have different heights. Take this fiddle as an example:
https://jsfiddle.net/6btarubL/2/
As you can see, the code is really simple:
HTML
<table>
<tr>
<td>
<div style="background-color: orange">
DIV
</div>
</td>
<td>
<div style="background-color: aqua">
Line 1<br>
Line 2
</div>
</td>
<td>
<div style="background-color: #fac">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color: #8f5">
DIV
</div>
</td>
<td>
<div style="background-color: #cb1">
Line 2.1<br>
Line 2.2
</div>
</td>
<td>
<div style="background-color: #eda">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
</table>
CSS
tr {
height: 100%;
}
td {
vertical-align: top;
min-width: 150px;
height: 100%;
}
td div {
height: 100%;
}
I'd like that the divs inside the cells took all the space, so they looked the same. Firefox does this, so its rendering is:
Chrome, on the other side, doesn't obbey the height : 100% df the divs, so the rendering is:
Then fun fact is that, if I remember correctly, Chrome was rendering it the same as Firefox until I updated to version 63 (I think I had version 59 before).
Any suggestions? Thanks!

Answer 1

Please Change your this Css Code and Check again. Chrome
td {
vertical-align: top;
min-width: 150px;
height:1;
}

Answer 2

HTML Change like below
<table>
<tr>
<td>
<div style="background-color: orange">
DIV
<br>
<br>
<br>
</div>
</td>
<td>
<div style="background-color: aqua">
Line 1<br>
Line 2<br>
<br>
</div>
</td>
<td>
<div style="background-color: #fac">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color: #8f5">
DIV
<br>
<br>
<br>
</div>
</td>
<td>
<div style="background-color: #cb1">
Line 2.1<br>
Line 2.2<br>
<br>
</div>
</td>
<td>
<div style="background-color: #eda">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
</table>

Answer 3

The solution whas this CSS:
<!-- THIS CODE DOESN'T WORK -->
tr {
display : flex;
height: 100%;
}
td {
vertical-align: top;
min-width: 150px;
height: 1;
}
td div {
height: 100%;
}
I'm right where I began. As #3rdthemagical pointed, the display : flex on <tr> breaks the layout and the columns aren't aligned. So, I did another test and these are the results:
WORKING CSS IN CHROME:
tr {
height: 100%;
}
td {
height: 1px;
}
div {
height: 100%;
background-color: aqua;
}
Sample output:
The above code looks like this in Firefox:
WORKING CSS IN FIREFOX:
tr {
height: 100%;
}
td {
height: 100%; /* <---------------- */
}
div {
height: 100%;
background-color: aqua;
}
But, in Chrome I have the problem for which I started this question, so it looks like this:
Who's right? Chrome or Firefox? Isn't there a cross-browser solution for this?
I'll keep on investigating...

Answer 4

You can use display flex
jsfiddle
CSS
tr {
height: 100%;
display: flex;
}
td {
vertical-align: top;
min-width: 150px;
}
td div {
height: 100%;
}
With flex, you can center elements, align vertically, reorder, you can do a lot of stuff.
I have already tested in mozilla, you can use prefixes to have more compatibility:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;

Answer 5

Finally, the solution that worked for me was to use CSS conditionals and load different styles depending on the browser. I've explained it in this question:
Load different CSS rule depending on the browser in an Angular 4 component
Cheers,