Table scroll-x Big Bug?

[幻白一驹]

Describe the bug

一直以来Table有个问题困扰我很久，就是我想让Column的宽度不写死，而是自适应其max-content最大宽度，然而我给Table设置了scroll-x = 'max-content'，以及max-height='300'，其中Column自定义渲染div上width:max-content, 结果会有意想不到的bug，横向滚动条无限延申，为什么？

如果不定Table的高度（去掉max-height='300')，那就没这个问题，可是我的需求要给Table高度，到底是什么原因呢？

以下是在线代码，顺便附上代码：

`

<script lang="ts" setup> import { h, defineComponent } from "vue"; import { NButton, useMessage } from "naive-ui"; import type { DataTableColumns } from "naive-ui"; type Song = { no: number; title: string; length: string; }; const createColumns = ({ play, }: { play: (row: Song) => void; }): DataTableColumns => { return [ { title: "No", key: "no", width: "max-content", }, { title: "Title", key: "title", width: "max-content", //columns自适应内容宽度，而不是定死宽度 }, { title: "Length", key: "length", width: "max-content", }, { title: "Action", key: "actions", render(row) { return h( NButton, { strong: true, tertiary: true, size: "small", onClick: () => play(row), }, { default: () => "Play" }, ); }, }, ]; }; const data: Song[] = [ { no: 3, title: "Wonderwall", length: "4:18" }, { no: 4, title: "Don't Look Back in Anger", length: "4:48" }, { no: 12, title: "Champagne Supernova SupernovaSupernova", length: "7:27" }, ]; const columns = createColumns({ play(row: Song) { console.log(); }, }); </script>

`

https://codesandbox.io/p/devbox/naiveui-table-bug-spyc63

Steps to reproduce

一直存在这个问题

Link to minimal reproduction

https://codesandbox.io/p/devbox/naiveui-table-bug-spyc63

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13500HX
    Memory: 3.27 GB / 15.73 GB
  Binaries:
    Node: 18.18.2 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.12.1 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.65)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[dellen]

尝试了下也复现了，通过获取header的dom然后给宽度了就好了，但是发现scroll-x给个空字符串也行。

[幻白一驹]

尝试了下也复现了，通过获取header的dom然后给宽度了就好了，但是发现scroll-x给个空字符串也行。

感谢您的回答，但是对我没有帮助，虽然看上去没问题了，但是max-content还是没效果，所有设置了width=max-content的列都被平分成一等分了，宽度都一样，那有的内容宽有的内容短就没意义了，根本原因就是设置了max-height，不加max-height就没问题