Html flex在internet explorer上的工作方式不同

我有一个div，它的高度为100vh，用于在页面上显示视频，为了将该div内的内容居中，我使用flex。但是，这在IE11上不起作用（这让我很害怕，因为它是最新版本）。有什么办法可以让它工作吗

以下是chrome的屏幕截图：

以下是IE11的屏幕截图：

正如你所看到的，图片和标语一直排在最上面。以下是与之配套的CSS：

.video-container, .video-container video{
    position: relative;
    min-height: 100vh;
    height: auto;
}
.video-container > video{
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: url(../img/creativebg.png);
    background-size: cover;
}
.video-container, .video-whilst{
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
    justify-content: center;
    background-color: transparent;
    color: #fff;
    text-shadow: 1px 1px #333;
}

下面是标记：

 <div class="jumbotron video-container">
            <video autoplay loop muted preload="auto" poster="img/post-video.png">
                <source src="vid/bgvid.mp4" type="video/mp4">
                <source src="vid/bgvid.webm" type="video/webm">
            </video>
            <div>
                <h1 class="title-no-title">SwitchHon</h1>
                <img src="img/brand-switchhon.png">
                <h4 class="h4-switchhon-brand">Ideas a todo mecate</h4>
                <a href="#"><img src="img/down-arrow-circle-md.png" class="center-pic down-arrow pulse-grow"></a>
            </div>
        </div>

斯切霍恩
待办事项

有没有办法解决这个问题？

基本上：，似乎有效

容器：

display:flex

+

高度/宽度

视频：

位置：绝对

内容：
align self:center