Q:

Why doesn't my flexbox hover effects work as expected in IE 11?

I have instituted a flex-grid in my code, however its not functioning as expected in ie11 (i unfortunately need to have it work there too)—Chrome and Firefox both work fine.  What seems to happen is when I load in IE11—the flex boxes only load 1 per line and are no longer hovering appropriately.
I am honestly at a loss here... anything I change breaks Chrome and Firefox.

.flex_row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.flex_col{
    flex: 1;
    margin: 10px;
}
.circle_shape {
    position: relative;
    display: flex;
    padding: 50% 0;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid gray;
    font-size: 16px;
    font-family: 'Source Sans Pro', sans-serif;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.circle_shape:before {
    content: "";
    position: absolute;
    top: 1%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
    filter: blur(5px);
    z-index: 2;
}
.circle_shape:hover{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); 
}
.circle_shape img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.circle_shape i{
    position: absolute;
    text-align: center;
    font-size: 4vw;
    text-shadow: 
    0 0 1px #fff, 
    0 1px 2px rgba(0,0,0,0.3);
}

.circle_shape h2 {
    position: absolute;
    bottom: 10%;
    font-size: 1vw; 
    font-weight: 800;
    text-align: center;
}

.circle_text{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,51,102, 0.9);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}
.circle_text p {
    color: #fff;
    padding: 4px;
    text-align: center;
    font-size: calc(7px + .5vw);
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}
.circle_shape:hover .circle_text{
    transform: scale(1);
    opacity: 1;
}
 <div class="flex_row">
     <a class="flex_col" href="http://www.cnn.com">
         <div class="circle_shape">
             <i class="fas fa-sitemap"></i>
             <div class="circle_text">
                 <p>Load me some CNN!</p>
             </div>
         </div>
         <div>
             <h2>Beep!</h2>
         </div>
     </a>
     <a class="flex_col" href="http://www.cnn.com">
         <div class="circle_shape">
             <i class="fas fa-sitemap"></i>
             <div class="circle_text">
                 <p>Load me some ABC!</p>
             </div>
         </div>
         <div>
             <h2>BIP!</h2>
         </div>
     </a>
     <a class="flex_col" href="http://www.cnn.com">
         <div class="circle_shape">
             <i class="fas fa-sitemap"></i>
             <div class="circle_text">
                 <p>Load me some BBC!</p>
             </div>
         </div>
         <div>
             <h2>BOOP!</h2>
         </div>
     </a>
 </div>

JSFiddle link

A:

I just wanted to follow up on this.  Rather than rewrite my code -- I decided to hack around it to define a solution.  
First step was to identify this is IE 10+ code in my CSS -- i did that through:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
}

I then redefined my flex_container and flex_item as block (using column code as follows) inside the @media query
[class*="flex_item"] {
        float: left;
        padding: 15px;
}

.flex_container{
        display: block;
        overflow: hidden;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: none;
        font-size: 16px;
}

.flex_item {width: 8.33%;box-sizing: border-box;}

I then went through my code and changed any reference to flex to block within that code.  Its a lot of duplication but it essentially got me back to @deepak-MSFTs response.  
This effectively resolves my issue. 

