Display table cell equal height bleeds over the container IE and FF
<p>I am working on 3 different grid layouts , floated , flex and table. Floated and flex work as intended but the display table based grid the cell is bleeding over the table in IE and FF. Task for flex and table grid is to have the columns and columns-in equal height. Flex grid does this without thinking but table based grid is causing some trouble.  </p>

<p><a href="https://jsfiddle.net/Themezly/ux2ewy6v/" rel="nofollow noreferrer">https://jsfiddle.net/Themezly/ux2ewy6v/</a></p>

<p>while this works fine in other browsers this is what I see in IE and FF</p>

<p><a href="https://i.stack.imgur.com/zTU4s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zTU4s.png" alt="enter image description here"></a></p>

<p>I have tried to vertically align the cell in the middle and that "kinda" fixes it in IE but FF wont play ball. </p>

<p><a href="https://i.stack.imgur.com/gru37.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gru37.png" alt="enter image description here"></a></p>

<p>Please note that given structure is using column-in for styling and I cant do <code>overflow:hidden;</code> on column or row due to possible borders and box shadows. </p>

<p>Any help is appreciated. </p>