CSS FlexBox Not Wrap Internal Table In Internet Explorer 11

A look at the following code. When you view it in Chrome, the td's internal content is wrapped, but in Internet Explorer 11, the content is not wrapped.

Please, help:)

JS Fiddle

CSS

 .flexbox {
     min-height:60px;
     height:60px;
     align-items: center;
     display: flex;
     flex-wrap: wrap;          
 }
 .moreblue {
     background-color: blue;
 }
 .moregreen {
     background-color: darkgreen;
 }
 .red {
     background-color: red;
 }

      

        
        
        
      

    

Html

<table>
    <thead>
        <td>
            <div class="flexbox moregreen">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
        </td>
    </thead>
</table>
<table>
    <thead>
        <td>
            <div class="moreblue">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
        </td>
    </thead>
</table>
<div class="flexbox red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>