解决移动端垂直滚动 使用justify-content显示不全的问题

一、需求：

移动端页面 展示一列列表，当数据量少时，不需要滚动且数据居中展示，数量多则自动向两边撑开 且出现滚动条。

其中，盒子高度是不固定的，根据页面屏幕比例和flex布局自动撑开。

二、

一开始代码是如下写法，发现 页面只能展示部分数据，前面的第一、二个数据显示不全或被隐藏了。为了使效果更明显，这里将两个div分别用边框标识出来。

<div className={styles.pageWrapper}>
  <div className={styles.topBox}>
    {list && list.length && (
      list.map((item: ListItem) => (
        <Button
          key={item.wid}
          className={styles.button}
          block
          shape="rounded"
        >
          {item.name}
        </Button>
      ))
    )}
  </div>
  <div className={styles.bottomBox}>
    底部Div
  </div>
</div>

// CSS样式
.pageWrapper {
    display: flex;
    flex-direction: column;
    background-size: 100% 100%;
    height: calc(100vh - var(--nav-bar-height));
    position: relative;
}
// 盛放列表的div盒子
.topBox {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    border: 1px solid blue;
    margin: 20px 0;
    padding: 0 40px;
    .button {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0px;
        }
    }
}
// 底部盒子 定高（这里只是为了演示效果，实际项目需求中  底部盒子高度不固定，随屏幕高度而变化）
.bottomBox{
    position: relative;
    height: 240px;
    border: 1px solid #ff9900;;
}

假设当前list中数据为 从1到7的七条数据，底部盒子高度设为 240px（ps：实际项目需求中  底部盒子高度不定，随屏幕高度而变化）。

具体效果如下：

 

 

 

 选中顶部盒子的dom元素时 我们可以发现，它的实际高度已超出我们当前页面的，所以出现了部分数据显示不全的现象。

如果把topBox里的justify-content: center;换成justify-content: space-between;或者justify-content: start; 是可以的，但是当只展示两三个选项时就会间距过大。而我们需要选项过少的时候是center效果，多了则显示全并能滚动。

尝试了很多种方法，最终发现，在topBox元素里面 再包一层div，把列表放到这层div就可以了，注意的是： 这层div不能再加justify-content: center样式了。

具体代码如下：

<div className={styles.pageWrapper}>
  <div className={styles.topBox}>
    // 注意：在这里加了一层div（style: btnBox），去包裹数据list
    <div className={styles.btnBox}>
      {list && list.length && (
        list.map((item: ListItem) => (
          <Button
            key={item.wid}
            className={styles.button}
            block
            shape="rounded"
          >
            {item.name}
          </Button>
        ))
      )}
    </div>
  </div>
  <div className={styles.bottomBox}>
    底部Div
  </div>
</div>

// CSS样式
.pageWrapper {
    display: flex;
    flex-direction: column;
    background-size: 100% 100%;
    height: calc(100vh - var(--nav-bar-height));
    position: relative;
}
// 顶部div盒子
.topBox {
    flex: 1 1;
    display: flex;
    justify-content: center;    // 在这里使用justify-content: center样式
    overflow-y: hidden;
    flex-direction: column;
    margin: 20px 0;
    padding: 0 40px;
    border: 1px solid blue;
    //这里加一层div，样式为btnBox，盛放list数据
    .btnBox {    // 这里无需再加justify-content: center样式
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        .button {
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0px;
            }
        }
    }
}
// 底部盒子 定高（这里只是为了演示效果，实际项目需求中  底部盒子高度不固定，随屏幕高度而变化）
.bottomBox{
    position: relative;
    height: 240px;
    border: 1px solid #ff9900;;
}

效果如下：

 

 

引：

https://cloud.tencent.com/developer/article/1757755