flex布局组件，一行2列模式下，第一个flex里的表格开启了内容自适应，内容无法填充满

xiukun commented 2 months ago

描述问题：

使用flex布局组件，一行2列模式下，第一个flex里的表格开启了内容自适应，内容无法填充满，第二个却可以。我想一行2列 flex布局和分栏都不好用，还有其他方式能正常展示么

截图或视频：

346308f68ae5b1be0e0fa51a3475b573

如何复现（请务必完整填写下面内容）：

你是如何使用 amis 的？ amis@6.8.0,低版本也存在这个问题
amis 版本是什么？请先在最新 beta 版本测试问题是否存在

粘贴有问题的完整 amis schema 代码：

{
"type": "page",
"title": "Simple Form Page",
"regions": [
"body"
],
"body": [
{
  "type": "flex",
  "items": [
    {
      "type": "container",
      "body": [
        {
          "type": "crud",
          "syncLocation": false,
          "api": {
            "method": "get",
            "url": "https://apifoxmock.com/m1/3546534-2258203-default/common/list",
            "requestAdaptor": "",
            "adaptor": "",
            "messages": {}
          },
          "bulkActions": [],
          "itemActions": [],
          "filterSettingSource": [
            "name",
            "age",
            "date",
            "id",
            "address",
            "enable",
            "image",
            "imageList",
            "imgsList"
          ],
          "id": "u:7c7e6e81eb6d",
          "perPageAvailable": [
            5,
            10,
            20,
            50,
            100
          ],
          "messages": {},
          "autoFillHeight": true,
          "columns": [
            {
              "label": "name",
              "type": "text",
              "name": "name",
              "id": "u:e645296b7f6a"
            },
            {
              "label": "age",
              "type": "text",
              "name": "age",
              "id": "u:3aa128affa56"
            },
            {
              "label": "date",
              "type": "text",
              "name": "date",
              "id": "u:087b5befb2de"
            },
            {
              "label": "id",
              "type": "text",
              "name": "id",
              "id": "u:590f994127af"
            },
            {
              "label": "address",
              "type": "text",
              "name": "address",
              "id": "u:92a5e3ffa9cd"
            },
            {
              "label": "enable",
              "type": "text",
              "name": "enable",
              "id": "u:cf859674d49f"
            },
            {
              "label": "image",
              "type": "text",
              "name": "image",
              "id": "u:329628c5febb"
            },
            {
              "label": "imageList",
              "type": "text",
              "name": "imageList",
              "id": "u:a71f02c13c80"
            },
            {
              "label": "imgsList",
              "type": "text",
              "name": "imgsList",
              "id": "u:59896290c65c"
            }
          ]
        }
      ],
      "size": "none",
      "style": {
        "position": "static",
        "display": "block",
        "flex": "1 1 auto",
        "flexGrow": 1,
        "flexBasis": "0px"
      },
      "wrapperBody": false,
      "isFixedHeight": false,
      "isFixedWidth": false,
      "id": "u:26b7f3aa3b9f"
    },
    {
      "type": "container",
      "body": [
        {
          "type": "crud",
          "syncLocation": false,
          "api": {
            "method": "get",
            "url": "https://apifoxmock.com/m1/3546534-2258203-default/common/list",
            "requestAdaptor": "",
            "adaptor": "",
            "messages": {}
          },
          "bulkActions": [],
          "itemActions": [],
          "filterSettingSource": [
            "name",
            "age",
            "date",
            "id",
            "address",
            "enable",
            "image",
            "imageList",
            "imgsList"
          ],
          "columns": [
            {
              "label": "name",
              "type": "text",
              "name": "name",
              "id": "u:e65905c3c8df",
              "placeholder": "-"
            },
            {
              "label": "age",
              "type": "text",
              "name": "age",
              "id": "u:5b24af957b6d"
            },
            {
              "label": "date",
              "type": "text",
              "name": "date",
              "id": "u:b7de5ede530a"
            },
            {
              "label": "id",
              "type": "text",
              "name": "id",
              "id": "u:649cc824eece"
            }
          ],
          "id": "u:b1ce6de41cd2",
          "perPageAvailable": [
            5,
            10,
            20,
            50,
            100
          ],
          "messages": {},
          "autoFillHeight": true
        }
      ],
      "size": "none",
      "style": {
        "position": "static",
        "display": "block",
        "flex": "1 1 auto",
        "flexGrow": 1,
        "flexBasis": "0px"
      },
      "wrapperBody": false,
      "isFixedHeight": false,
      "isFixedWidth": false,
      "id": "u:da9564019295"
    }
  ],
  "style": {
    "position": "relative",
    "rowGap": "10px",
    "columnGap": "10px",
    "flexWrap": "nowrap",
    "inset": "auto"
  },
  "id": "u:d2652672da16",
  "isFixedHeight": false,
  "isFixedWidth": false
}
],
"id": "u:2226de538e50",
"pullRefresh": {
"disabled": true
}
}

操作步骤请简单描述一下复现的操作步骤...

github-actions[bot] commented 2 months ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

cybexr commented 1 month ago

mark

xiukun commented 1 month ago

e8879f044d79e895436d7d102 在flex 2列布局里每列一个crud表格第一个crud 的计算逻辑里会把cxd-container 元素的高度计算进行导致计算出现偏差,因为cxd-container 的 position是 static 或者是relative,这里如果要过滤cxd-container 要怎么判断合适

2betop commented 1 week ago

https://github.com/baidu/amis/pull/11251/files

baidu / amis