Bootstrap navbar-toggler无法在带有容器的Safari中正确扩展

Question

我想用导航栏和以下容器构建页面。 容器应自动填充浏览器的其余高度。

至少在macOS Chrome和macOS Firefox中，以下代码可以满足我的要求。但是在macOS Safari，iOS Chrome，iOS Firefox和iOS Safari中，切换器无法正常工作。切换菜单时，Container不会向下移动（在iPhone SE上经过测试）。

html, body {
    height: 100%;
}

.container, .navbar {
    border-style: solid;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="h-100 d-flex flex-column">
    <nav class="navbar navbar-expand-sm navbar-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container flex-fill">
        text
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

当我从div中删除容器类时，一切都很好，但div不再是容器...

调整窗口大小（macOS Safari）时，菜单和容器将按预期显示。

请有人能告诉我我在做什么错吗？