Javascript css flexbox仅在使用ajax时适用于调整大小

我使用CSS Flexbox将三个div堆叠在一起。 中间的div必须根据可用的大小增长或收缩。 顶部和底部div将占据它们的大小

在小提琴上测试时，它会起作用。 但是，我正在使用ajax和fullPage.js滑块加载页面中的数据

结果是中间的div不会填满剩余的空间。 当我调整窗口大小时，它会触发大小的变化，一切都很好

所以我一直在努力创造一个工作环境，但没有成功。 到目前为止我所做的：

• 尝试触发一个窗口调整$（window.trigger（'resize'）
• 尝试更改柔性框的CSS高度
• 尝试在500毫秒后重新加载数据
• 将flexbox高度设置为特定高度，然后再次将其设置为自动

我忘记了我到目前为止在尝试CSS技巧时做的所有其他事情

这里是CSS/HTML

CSS:

HTML:

一些文本
数据
基站

在包装器中，我将稍后加载pageInfo、pageData和sliderBtnBar div。此时Flexbox无法工作。当页面加载时加载它将起作用

就像我说的，我找不到工作。 你以前见过这个或者知道如何解决这个问题吗？ 任何想法都会有帮助

---

提前谢谢

您忘记关闭示例HTML.tnx中的

div.pageData

！刚关上；）复制这个问题总是有助于获得更多的答案。我理解，但这需要很多额外的时间（相当多的依赖性）。我有一个变通方法，但还不太满意。在示例HTML.tnx中，您忘记关闭

div.pageData

！刚关上；）复制这个问题总是有助于获得更多的答案。我理解，但这需要很多额外的时间（相当多的依赖性）。我有一份工作要做，但不太满意。

#wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

.pageInfo {
    flex: 0 0 auto;
}

.pageData {
    flex: 1 1 auto;
    margin-top: 10px;
}

.sliderBtnBar {
    flex: 0 0 auto;
    height: 40px;
    position: relative;
}

<div id="wrapper">
    <div class="pageInfo">some text</div>
    <div class="pageData">
         <div>data</div>
    </div>
    <div class="sliderBtnBar">btns</div>
</div>