Bootstrap 4 navbar content vertical alignment ignored in IE 11

I am placing my navbar over a background image (using class bg-light) with the navbar located at bottom of image. But in IE 11 the navbar appears at top of image. I am aware IE 11 has issues with Bootstrap alignment and this is probably one of them, but wonder if there is any workaround to get navbar to stay at bottom of image in IE? Here is the stripped down code:

<style>
.bg-light{
    background-image:url("https://www.restinbeing.com/images/header3.jpg");
    background-repeat: no-repeat;
    min-height: 140px;
    margin:0px auto;
}
</style> 

<nav class="navbar navbar-expand-md navbar-light bg-light d-flex align-items-end "> 
<div class="nav-content">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown menubar"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About </a> 
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Item 1</a>
                </div>
                </li>
         </ul>
    </div>
</nav>

Solution

Turns out min-height with flex was the issue, replacing it with height did the trick. See: https://github.com/philipwalton/flexbugs#flexbug-3 The suggested workaround also worked, and would be helpful where min-height was necessary.