使用React-virtualized做聊天列表时flex-end不生效如何实现消息从下往上排列？

问题根因 #

你当前的flex-end不生效核心是两层样式冲突：

• 你给AutoSizer外层的div设置了flex: 1 1 auto，这个属性会让该div直接撑满父flex容器的所有可用空间，当子元素总高度等于父容器高度时，justify-content: flex-end的对齐规则不会触发，自然看不到效果
• 父容器使用min-height: 100%而非固定受限高度，flex布局下百分比高度的计算依赖父级的明确高度定义，min-height不会触发严格的高度限制，进一步导致对齐规则失效

可行解决方案 #

方案1：修正当前flex布局逻辑 #

调整样式规则即可生效，改动点如下：

1. 给外层flex容器设置明确的受限高度，替代min-height: 100%，例如聊天窗口占满视口剩余高度的场景可以写：

height: calc(100vh - 输入框高度);

2. 删掉AutoSizer外层div的flex: 1 1 auto属性，替换为overflow: hidden，避免容器无限制增长
   修改后代码参考：

<div style={{ position: 'relative', height: 'calc(100vh - 60px)', display: 'flex', justifyContent: 'flex-end', flexDirection: 'column' }} >
  <div style={{ overflow: 'hidden' }}>
    <AutoSizer onResize={scrollToBottom}>
      {({ width, height }) => (
        <List
          ref={ListRef}
          deferredMeasurementCache={_cache.current}
          width={width}
          height={height}
          overscanRowCount={props.overscanRowCount}
          noRowsRenderer={_noRowsRenderer}
          rowCount={xRowCount}
          rowHeight={_cache.current.rowHeight}
          rowRenderer={_rowRenderer}
          scrollToIndex={xRowCount}
        />
      )}
    </AutoSizer>
  </div>
</div>

方案2（更推荐）：使用List原生反向属性 #

React-virtualized的List组件原生支持reversed属性，专门适配聊天类从下往上排列的场景，不需要额外写flex-end、column-reverse等样式，兼容性和稳定性更高：

1. 给List组件新增reversed={true}属性
2. 直接将消息数据源倒序传入，不需要给消息项设置column-reverse样式
3. 父容器仅需要设置明确的高度，不需要flex相关的对齐规则
   该方案可以自动处理新消息插入后的滚动位置，避免手动维护滚动偏移的问题。

额外注意事项 #

如果使用反向模式，新消息发送后调用scrollToIndex传入最新的消息索引即可自动滚动到底部，不需要额外计算滚动位置。

内容的提问来源于stack exchange，提问作者W. Lucas