Height: Auto Flexbox Glitch in IE and Edge?

I am having a problem with IE and Edge. I think it's some sort of height glitch because I found the code that is causing the problem, but I don't know how to fix it. Please note that this glitch does not show up in Google Chrome or Firefox. The code that I found to be problematic is:

@media screen and (max-width: 1170px) {
    header.main-h {
        height: auto;       
        padding-top: 0;        
    } 

Click here to see a picture of the glitch. Is there a possible work around or "hack" to fix it for Edge at least? When I get rid of "height:auto" the header formats correctly. But then in Chrome and Firefox there seems to be problems. Please let me know how to fix this! Below is a snippet of the code for the header I made. Hope it helps....

body {
  padding: 0;
  margin: 0;
}

.container-l {
    width: 85%;
    max-width: 1400px;
    margin: 0 auto;
}

header.main-h {    
    height: 430px;
    padding-top: 30px; 
    background: linear-gradient(to right, rgba(58, 255, 195, 0.89), rgba(36, 159, 255, 0.831)),
    url(http://i.imgur.com/MlXivrM.png);
    /* ie fallback */
    background-color: #5fb8fc;
    position: relative;
    background-position: center;
}

header.main-h.two { 
    height: 400px; 
}

.main-h .hh {
    display: flex;
}

.main-h .hh-1, .main-h .hh-2 {
    flex: 1; 
    text-align: center;
}

.main-h .hh-1 {
    text-align: left;
}

.main-h .hh-t {
    padding-right: 60px;
}

header.main-h h1 {
    margin-top: 95px;
    font-size: 36px;   
    font-family: 'Oxygen', sans-serif;
    font-weight: bold;    
    color: #171f24;
    text-shadow: 0 1px 2px rgb(0,0,0,0.20);
}

header.main-h.two h1 {
    margin-top: 115px;
}

header.main-h h2 {
    margin-top: -10px;    
    font-weight: normal;
    font-size: 18px;  
    font-family: 'Hind', sans-serif;
    color: #242424;
    line-height: 25px;
}

.main-h .hh-btns {
    margin-top: 30px;
}

a.hh-btn, a.hh-btn-2 {  
    display: inline-block;
    padding: 0.5rem 1.8rem;
    border: none;
    border-radius: 4px;
    background-color: #004fff;
    color: #FFF;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;   
    /*box-shadow: #16a175 0 1px 1px;*/
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
    transition: 0.3s all ease-out;
}

a.hh-btn-2 {
    margin-left: 10px;
    background-color:#FFF;
    color: #007cf3;
}

.main-h .fas {
    font-size: 11px;
}

a.hh-btn:hover {
    background: #0036af;
    cursor: pointer;
}

a.hh-btn-2:hover {   
    background: #0036af;
    color: #fff;
    cursor: pointer;
}

.main-h .banner-img {
    margin-top: 30px;    
}

.main-h.two .banner-img {
    margin-top: 0;
}    

@media screen and (max-width: 1300px) {
     div.hh.container-l {
        width: 92%;
    }
}

@media screen and (max-width: 1270px) {
    .container-books .pg-h-2 {
        margin: 50px 0 20px 0;    
    }
}

   /* THE PROBLEM ??? */

@media screen and (max-width: 1170px) {
    header.main-h {
        height: auto;       
        padding-top: 0;        
    }
    header.main-h.two {
        height: auto;
    }
    header.main-h h1 {
        font-size: 35px;
    }
    header.main-h h2 {
        font-size: 19px;
    }
    .main-h .hh-t {
        padding-right: 0;
    }
    .main-h .hh {
        flex-direction: column;
    } 
    .main-h .hh-t {
       width: 600px;
       margin: 0 auto; 
    }
    .main-h .hh-t h2 {
        padding: 0 30px 0 30px;
    }
    .main-h .hh-1 {
        text-align: center;
    }    
    .main-h .banner-img {
        margin-top: 75px;
        margin-bottom: -4px;
    }
    .main-h.two .banner-img {
        margin-top: 40px;
    }
}

@media screen and (max-width: 1100px) {    
    .fb {
        width: 390px;
    }
}

@media screen and (max-width: 940px) {
    .all-free-books {
        flex-direction: column;
    }
    .fb {
        margin: 30px auto;
    }
    .fb-2, .fb-3, .free-books-2 .fb-1 {
        margin-top:50px;
    }
    .container-books .pg-h-2 {
        margin: 60px 20px 60px 20px;    
    }
    .fb.fb-3.rekt {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    .container-books {
        width: 90%;
    }   
}

@media screen and (max-width: 730px) {
    .main-h .hh-t {
       width: auto;
        padding-right: 10px;
        padding-left: 10px;
       margin: 0 auto; 
    }
}

@media screen and (max-width: 500px) {
    .fb {
        width: 360px;
    }    
}

@media screen and (max-width: 490px) {
     .fb {
        width: auto;
    }
    .container-books .pg-h-2 {
        margin: 60px 10px 60px 10px;    
    }
    
     .main-h .hh-btns {
        padding-right: 40px; 
        padding-left: 40px;
    }
    a.hh-btn, a.hh-btn-2 {
        display: block;
    }  
    a.hh-btn-2 {
        margin-top: 15px;
        margin-left: 0;
    } 
    .main-h .banner-img {
        max-width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 470px) {
    header.main-h h2 {
        font-size: 18px;
    }  
    .main-h .hh-t h2 {
        padding: 0 15px 0 15px;
    }
}

@media screen and (max-width: 360px) {
    header.main-h h1 {
        font-size: 30px;
    }
    .main-h .hh-t h2 {
        padding: 0 10px 0 10px;
    }
    .main-h .hh-btns {
        padding-right: 20px;
        padding-left: 20px;
    }
    .free-books-2 {
        margin-top: -25px;
    }
    .fb-2, .fb-3, .free-books-2 .fb-1, .free-books-2 .fb-2 {
        margin-top: 100px;
        
    }
    .fb {
        height: 429px;
        padding-bottom: 60px;
    }
    .fb .fb-d {
        margin-top: 12px;
    }
    .fb a {
        display: block;
        margin: 0px 20px 0 20px;
        padding: 5px 40px 5px 40px;
    } 
    .fb img {
        max-width: 100%;
        height: auto;
    }
}
 <!-- HEADER -->
    
    <header class="main-h">
        <div class="hh container-l">
            <div class="hh-1">
                <div class="hh-t">
                    <h1>Why is Internet Explorer and Edge the Worst Thing to Ever Happen?</h1>              
                  <h2>Please people just use Google Chrome or Mozilla Firefox... Even Safari web viewer. I just can't deal with these bugs and glitches.</h2>
                    <div class="hh-btns">
                        <a href="free-ebooks.html" class="hh-btn">Click here to die</a>
                        <a href="online-library.html" class="hh-btn-2">Click here to die, again</a>
                    </div>
                </div>
            </div>
                           
            <div class="hh-2">
                <img class="banner-img" src="https://via.placeholder.com/400">            
            </div>
        </div>	
    </header>