CSS border-collapse doesn't work fully in Chrome with display:flex inside a td?

Question

Setting some tds to have border widths to "thin" and some to "0" with border-collapse: collapse; I would have thought would give me no 2px-wide borders, but yet I get inconsistent borders. It seems to be a problem when one has display:flex on it--gets rendered 2px wide instead of 1px, as if there is no border-collapse. Is this a shortcoming of Chrome or am I missing a CSS technique?

Does anyone have insight on what circumstances cause border-collapse to fall short of the ideal in Chrome?

Here's the effect in an example - cell two seems to ignore border-collapse.

table {
    box-sizing: border-box;
    border-collapse: collapse;
}
td {
    border-left: thin solid #d3d3d3;
    border-right: thin solid #d3d3d3;
}
.d-flex {    display: flex;    }

<table class="my-grid">
    <tr>
       <td>cell one</td>
       <td class="d-flex">cell two</td>
    </tr>
    <tr>
        <td>cell three</td>
        <td>cell four</td>       
    </tr>
</table>

Answer 1

Using display: flex; makes the cell lose some of its desirable table cell properties, since it is no longer set to display: table-cell;, and there is no display: table-cell-flex.

So the only solution seems to be to add a container <div> element inside the <td>, which should by nature take up the entire table cell except for its padding if any, and make it have display: flex; so that I can use flexbox styles for the content.

 table {
    box-sizing: border-box;
    border-collapse: collapse;
 }
 td {
    border-left: thin solid #d3d3d3;
    border-right: thin solid #d3d3d3;
}
td {
    display: table-cell;
    vertical-align: inherit;
}
.d-flex {    display: flex;    }

<table class="my-grid">
    <tr>
       <td>cell one</div></td>
        <td><div class="d-flex">cell two</div></td>
    </tr>
    <tr>
        <td>cell three</td>
        <td>cell four</td>
       
    </tr>

</table>