uni-app中使用flex布局时子元素高度不生效怎么办？

这问题我上周刚踩过坑，根本不是uni-app的锅，是scroll-view在作怪。CSS的话，flex布局在scroll-view里会被强制破坏，因为scroll-view自己搞了一套滚动机制，会把子元素的flex相关属性给忽略掉。

你现在的结构 page -> scroll-view -> .container -> .child，直接改：把scroll-view干掉，让.container自己来滚动。如果一定要用scroll-view，那就不能靠flex:1撑高，得手动算高度。

最简单的解法：

把scroll-view去掉，结构变成 page -> .container -> .child

然后给.container加上 height: 100vh，.child保持 flex:1 没问题

如果你非得用scroll-view（比如需要监听滚动事件），那就得用calc动态减去其他元素高度，比如：

.child {

  height: calc(100vh - 其他元素总高度);

  overflow: auto;

}

rpx跟这个没关系，别被带偏了。记住一点：uni-app里只要套了scroll-view，flex布局基本就废了，这是它底层实现决定的，文档都不写清楚，坑死人。

这个问题在uni-app里确实挺常见的，尤其是新手容易踩坑。你遇到的情况不是uni-app特有的限制，但和它的运行机制、页面结构以及小程序底层渲染方式有关。我们一步步来解决。

首先看你的代码结构：page -> scroll-view -> .container -> .child，这个嵌套是关键问题所在。

第一步，先明确一点：flex:1 要生效，前提是父容器有确定的高度，而且 flex 布局要能正常传递高度。你在 .container 上写了 height: 100vh，看起来没问题，但在 uni-app 中，scroll-view 是一个原生组件，它会脱离正常的文档流布局模型，导致内部的 flex 高度计算失效。

简单说就是：scroll-view 把你整个 .container 包进去了，而 scroll-view 自己没有设置固定高度或 flex 占位，它的子元素再怎么 flex:1 也没用，因为“可用空间”是无限的或者未定义的。

解决方案有两个方向，推荐使用第一个：

方法一：去掉外层的 scroll-view，直接让内容在 page 内滚动

<template>

  <view class="container">

    <view class="header">头部</view>

    <view class="child">

      <!-- 这里放长内容 -->

    </view>

  </view>

</template>



<style>

.container {

  display: flex;

  flex-direction: column;

  height: 100vh; /* 占满视口 */

}



.header {

  height: 50px;

  background: #ddd;

}



.child {

  flex: 1; /* 自动撑满剩余空间 */

  background: #f0f0f0;

  overflow: auto; /* 内容超出时自身滚动 */

}

</style>

这里需要注意的是，uni-app 的 page 默认是可以滚动的，如果你不需要特殊控制滚动行为（比如监听滚动事件、下拉刷新等），完全可以让 .child 自己 overflow: auto 来实现局部滚动，而不是把整个页面包在 scroll-view 里。

这样 flex 高度就能正确计算了，因为 container 有 100vh 高度，flex-direction: column 下，flex:1 的子元素自然占满剩余空间。

方法二：如果必须用 scroll-view（比如要做自定义下拉刷新、监听滚动位置）

那就要确保 scroll-view 本身有明确高度，不能靠内容撑开。

<template>

  <scroll-view class="scroll-wrap" scroll-y>

    <view class="container">

      <view class="header">头部</view>

      <view class="child">

        <!-- 内容 -->

      </view>

    </view>

  </scroll-view>

</template>



<style>

/* 关键点：scroll-view 必须设高度 */

.scroll-wrap {

  height: 100vh;

}



.container {

  display: flex;

  flex-direction: column;

  height: 100%; /* 占满 scroll-view 的高度 */

}



.header {

  height: 50px;

  background: #ddd;

}



.child {

  flex: 1;

  background: #f0f0f0;

  overflow: hidden; /* 防止双层滚动条 */

}

</style>

这里的关键是给 scroll-view 设置 height: 100vh，让它有确定的可滚动区域，然后 container 拿到 100% 高度，flex 布局才能正常工作。

还有一个隐藏坑点：有些情况下 app-nvue 页面和普通 vue 页面表现不同。nvue 使用的是 native 渲染引擎（weex），对 flex 支持更好，但对 CSS 属性支持有限；而普通 vue 页面在小程序端跑的是 webview 模拟，容易受 scroll-view 影响。

总结一下：

- 不要随便套 scroll-view，能不用就不用
- 如果用了 scroll-view，一定要给它设置明确高度（如 100vh）
- 父容器要有固定高度，flex:1 才有意义
- 子元素加 min-height:100% 没用，因为这不是解决 flex 分配的问题
- rpx 和单位无关，这个问题不是单位导致的

最后提醒一点，开发时可以用 uView 或 uni-css 库里的现成类，比如 u-flex、u-full-height，但原理都一样，搞懂底层逻辑才不会每次都被高度卡住。