Html 如何在Ionic中使用flexbox填充垂直空间

我正在尝试使用flexbox创建一系列行，这些行可以根据可用的屏幕空间进行缩放。这对于在移动设备上创建一个良好的用户界面似乎是必要的，因为它可以防止所有框都聚集在顶部，并均匀地分隔行。问题在于，它似乎忽略了容器上的垂直填充，并在顶部收集元素。我的代码如下

CSS:

以及HTML：

<div class="fill-vertical-space">
    <div class = "row">
        <div class="col col-100 section">
             ...
        </div>
    </div>

    <div class = "row">
        <div class="col col-100 section">
                ...
        </div>
    </div>
</div>

...
...

注意：我将内容保留在行之外。它们通常是标题、嵌套弹性框和下拉菜单的组合

---

注2：我在网站上查看了其他答案，但没有一个与ionic相关（ionic CSS是否可能干扰flex box？）。

问题在于他们的CSS文件中有一个ionic类。添加：

.scroll{
    height: 100%;
}

---

修正了这个问题。我还需要一个容纳flex模块的外部容器，该容器也被设置为100%高度，并将.fill vertical space类声明为具有静态定位。

如果您可以使用Codepen或创建演示，那将很好。我将查看它。今天可能没有时间，但我知道这会很有帮助。创建了一个代码笔示例。我一直在玩这个代码很多。同样的代码在ionic框架内似乎不起作用。经过证实的。完全相同的设置非常适合我。：）

.scroll{
    height: 100%;
}