How to Fix Flex Footer bug IE 11 - html

Question

I'm trying to do a footer for my page, but I wanted to do this footer with the dynamic height attribute, this to better accommodate the content in smaller windows, I found that I should use flex for this. Everything works fine in Chrome and Edge but IE breaks the design, the footer is pushed so far down.
This is an example of how the page looks like in Chrome and Edge
And this in IE
I am using the bootstrap 4.5 carousel and this is the CSS that I am using for the footer.
html{
display:flex;
}
body{
min-height: 100vh;
width:100%;
display:flex;
flex-direction:column;
}
.header{
flex-shrink: 0;
}
.footer {
flex-shrink: 0;
background: #000000;
}
.content{
flex-grow:1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="ml-5 mr-5 mb-3">
<!--Carousel-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://cp12.nevsepic.com.ua/2-1/1358115669-1037168-www.nevsepic.com.ua.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cp12.nevsepic.com.ua/2-1/1358115669-1037168-www.nevsepic.com.ua.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cp12.nevsepic.com.ua/2-1/1358115669-1037168-www.nevsepic.com.ua.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--Cards-->
<div class="card-deck">
<div class="card">
<img src="https://lh3.googleusercontent.com/proxy/VrXfgT75SzZSdv4_fUbujEBcWspapF079o24SolSQXCa2SS6ZV5TGxosjjj5DUJEco351bmm1HfHdMo7c3P9vTTP2ZUO0bVlxs4s9SeVKu7OavwktBNL" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://lh3.googleusercontent.com/proxy/VrXfgT75SzZSdv4_fUbujEBcWspapF079o24SolSQXCa2SS6ZV5TGxosjjj5DUJEco351bmm1HfHdMo7c3P9vTTP2ZUO0bVlxs4s9SeVKu7OavwktBNL" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://lh3.googleusercontent.com/proxy/VrXfgT75SzZSdv4_fUbujEBcWspapF079o24SolSQXCa2SS6ZV5TGxosjjj5DUJEco351bmm1HfHdMo7c3P9vTTP2ZUO0bVlxs4s9SeVKu7OavwktBNL" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row text-center justify-content-center pt-3">
<div class="col-md-3 mb-3">
<h6>
<a class="text-smr" href="#">Ohter Sites:</a>
</h6>
</div>
<div class="col-md-2 mb-3">
<h6 class="font-weight-bold">
<a class="link-f" href="#">Site 1</a>
</h6>
</div>
<div class="col-md-2 mb-3">
<h6>
<a class="link-f" href="#">Site 2</a>
</h6>
</div>
<div class="col-md-2 mb-3">
<h6>
<a class="link-f" href="#">Site 3</a>
</h6>
</div>
<div class="col-md-2 mb-3">
<h6>
<a class="link-f" href="#">Site 4</a>
</h6>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>