Css 为什么只有最初活动的引导选项卡才能正确响应窗口大小调整，即使在选项卡之间应用了一致的样式设置？

我正在使用Plotly Dash构建一个web应用程序。总的布局可以在所附的屏幕截图中看到。HTML和CSS的编写使得应用程序可以填充视口，而不管窗口大小；我依赖Flexbox。以下是页面HTML的简化和折叠版本：

<div id="_dash-app-content">
    <div id="app-container" class="full-page container-fluid"><br>
        <div>
            <ul id="tabs" class="nav nav-tabs"></ul>
            <div class="tab-content">
                <div id="tab-1" class="tab-pane active"></div>
                <div id="tab-2" class="tab-pane"></div>
                <div id="tab-3" class="tab-pane"></div>
                <div id="tab-4" class="tab-pane"></div>
            </div>
        </div>
    </div>
</div>

---

当应用程序第一次加载时，所有标签看起来都很棒。此外，只要我处于初始活动选项卡上（比如第一个选项卡，

tab-1

），调整窗口大小时，选项卡内容的行为与预期一样。任何其他选项卡都不是这种情况，它们都可以水平调整大小，但不能垂直调整大小，以适应窗口。我认为这是不正确的。但是，如果我在除第一个选项卡（最初处于活动状态并正确响应窗口大小调整的选项卡）之外的任何选项卡上，我可以通过在浏览器中打开web inspector工具，将

选项卡窗格

类的

高度

属性从100%更改为任何其他属性来修复布局，然后将相同的

height

属性重置回100%。有人能帮助我了解发生了什么，并希望如何解决它吗？非常感谢

我没有解决方案，但我相信这与：我没有解决方案，但我相信这与：

html,
body {
    height: 100vh;
}

.full-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#app-container > div {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tab-content {
    flex-grow: 1;
}

.tab-pane {
    height: 100%;
}