SharePoint列表JSON格式化：背景色填充DIV整列高度求助

问题出在flex布局的对齐配置上，调整以下两处即可让红色背景填满整个行高：

1. 给包含红色区域和右侧内容的外层button添加align-items: stretch，确保两个子div都能拉伸填满button的高度
2. 调整红色区域内的文字容器布局，改为垂直方向flex并居中内容，避免限制高度

修改后的完整JSON代码：

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideListHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "position": "relative",
      "width": "100%",
      "border-style": "solid",
      "border-width": "thin",
      "border-color": "#102c3c",
      "box-sizing": "border-box",
      "height": "100%",
      "margin": "5px 0",
      "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06)"
    },
    "children": [
      {
        "elmType": "button",
        "customRowAction": {
          "action": "defaultClick"
        },
        "attributes": {
          "class": "ms-bgColor-white ms-bgColor-themeLighter--hover"
        },
        "style": {
          "width": "100%",
          "display": "flex",
          "padding": 0,
          "height": "100%",
          "border": "none",
          "cursor": "pointer",
          "align-items": "stretch"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {},
            "style": {
              "min-width": "150px",
              "background-color": "red",
              "display": "flex",
              "height": "100%",
              "box-sizing": "border-box",
              "align-items": "stretch"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "=if([$Category] == 'Action Needed', 'warning', if([$Category] == 'Documentation', 'Document', if([$Category] == 'Information', 'Info', 'Tag')))",
                  "class": "ms-fontSize-m ms-fontWeight-regular  ms-fontColor-grey",
                  "title": "[$Category]"
                },
                "style": {
                  "flex": "none",
                  "padding": "10px",
                  "padding-left": "18px",
                  "padding-top": "16px"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1",
                  "text-align": "left",
                  "display": "flex",
                  "flex-direction": "column",
                  "justify-content": "center",
                  "padding": "10px 0"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-semibold ms-fontColor-gray",
                      "title": "=toLocaleDateString([$Modified])"
                    },
                    "style": {
                      "margin-right": "12px",
                      "overflow": "hidden",
                      "white-space": "nowrap"
                    },
                    "txtContent": "=toLocaleDateString([$Modified])"
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-lighter ms-fontColor-gray",
                      "title": "[$Category]"
                    },
                    "style": {
                      "margin-right": "12px",
                      "overflow": "hidden",
                      "white-space": "nowrap",
                      "font-size": "12px"
                    },
                    "txtContent": "[$Category]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-l"
            },
            "style": {
              "border-left": ".1mm double",
              "border-left-style": "ridge",
              "border-left-color": "ms-fontColor-themePrimary",
              "width": "100%",
              "min-height": "42px",
              "height": "100%",
              "text-align": "left",
              "padding": "1px 40px 2px 8px",
              "overflow": "hidden",
              "display": "flex",
              "flex-direction": "column",
              "justify-content": "center"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "=substring(@currentField, 0, 75) + '...'",
                "style": {
                  "overflow": "clip",
                  "text-decoration": "none"
                },
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontWeight-semibold ms-fontSize-m"
                }
              },
              {
                "elmType": "a",
                "txtContent": "=if ([$Category] == 'Action Needed', [$TakeActionText], '')",
                "style": {
                  "overflow": "clip",
                  "text-decoration": "none"
                },
                "attributes": {
                  "target": "_blank",
                  "class": "ms-fontSize-s ms-fontWeight-semibold ms-fontColor-lightblue",
                  "href": "[$URL]"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "button",
        "customRowAction": {
          "action": "share"
        },
        "attributes": {
          "class": "ms-fontColor-themeLight ms-fontColor-themeDark--hover",
          "title": "Share Item"
        },
        "style": {
          "border": "none",
          "background-color": "transparent",
          "cursor": "pointer",
          "position": "absolute",
          "top": "12px",
          "right": "0"
        },
        "children": [
          {
            "elmType": "span",
            "attributes": {
              "iconName": "Share",
              "class": "ms-font-l"
            }
          }
        ]
      }
    ]
  }
}

关键修改说明 #

• 外层button新增align-items: stretch：让两个子div（红色区域和右侧内容）自动拉伸填满button的高度
• 红色区域内的文字容器改为display: flex; flex-direction: column; justify-content: center：垂直居中内容的同时，让容器撑满红色背景div的高度
• 移除了部分不必要的align-items: center和height:100%设置，避免冲突

内容的提问来源于stack exchange，提问作者Madeline