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

Question

我正在尝试使用 flexbox 创建一系列可缩放以适应可用屏幕空间的行。这似乎是在移动设备上创建一个体面的 UI 所必需的，因为它可以防止所有框聚集在顶部，并且均匀地间隔行。问题是它似乎忽略了容器上的垂直填充，并在顶部收集元素。我的代码如下

CSS：

.fill-vertical-space{
    display: -webkit-flex;
    display: flex;

    flex-direction: column;
    background-color: green;

    height: 100%;
}

.fill-vertical-space > div, .fill-vertical-space > .row{
    -webkit-flex: 1;
    flex: 1;
    background-color: blue;
}

还有 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 相关（Ionics CSS 是否会干扰 flex box？）。

Answer 1

问题归结于他们的 CSS 文件中的一个离子类。添加：

.scroll{
    height: 100%;
}

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