display table and bad overflow: hidden in IE and MS Edge

I have border-radius and overflow: hidden on the parent element to hide anything overflowing inner.

It should looks like this:

It works everywhere except IE and Edge. In these browsers, it looks like this:

HTML:

<div class="table">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

CSS:

.table {
    border-radius: 10px;
    border: 1px solid black;
    overflow: hidden;
    display: table;
    width: 100%;
}

.col1 {
    background: pink;
    display: table-cell;
    width:50px;
}

.col2 {
    background: orange;
    display: table-cell;
    height: 200px;
}