naive-ui低版本浏览器兼容问题n-data-table-＞scrollbar不适应父元素的高

问题描述

在低版本浏览器部署项目的时候，naive-ui组件库data-table组件内容区域不能滚动。

定位问题

1. 找到table对应的scroll组件。查看其对应的高没有问题。

2. 继续看子元素，没有继承父组件的高度。

解决1、给父元素position：relative。子元素position：absolute。

这种方式比较传统。

解决2、利用flex-grow

可以看到组件库封装scrollbar的时候，给了子组件(当前元素:last-child)一个flex-grow：1。
所以给当前元素一个display: flex; flex-direction: column;
解决，要修改子组件高度继承，所以要更改父组件的direction。

flex布局