antd Table scroll 与 flex-1冲突

0 阅读1分钟

项目有个bug,之前重构的时候,写了个

<div className="flex-1">
      <Table
        scroll={{
          x: "max-content",
          y: `calc(100vh - ${681 + tagHeight}px)`,
        }}
        loading={computed.loading}
        dataSource={logic.tableData}
        rowKey="dataId"
        columns={[
          {
            title: "项目",
            dataIndex: "dataName",
            key: "dataName",
          },
          {
            title: "客资数",
            dataIndex: "numberOfCustomers",
            key: "numberOfCustomers",
          },
        ]}
        className="mt-2"
      />
    </div>

table父元素加了个flex-1

然后页面表现如下:

QQ202571-113333.gif

比较神奇。排查了之后把 flex-1 去掉就行了

原因的话我感觉是 flex-1 跟 table 的 scroll.x 冲突。本来table就默认沾满父元素宽度的。也没必要加flex-1