Using JSON to format a SharePoint List

ITpadawan the JSON I wrote for a similar requirement is shown below and the result is in the attached video and it wraps to whatever the screensize is so there's no horizontal scrollbar.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "_comment_": "MAIN DIV",
    "attributes": {
      "class": "ms-bgColor-themeLight"
    },
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "flex-direction": "row",
      "padding": "20px",
      "margin-bottom": "16px",
      "max-width": "98%",
      "border-radius": "5px",
      "background-color": "#08526b"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "left",
          "max-width": "98%",
          "min-width": "205px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "font-size": "15px",
              "font-weight": "normal"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "='Question: ' + [$Question] + ' ' + [$SubmittedOn] + ' ' + [$Email]",
                "style": {
                  "display": "=if([$Question] == '', 'none', 'block')",
                  "padding-top": "0px",
                  "margin": "0 20px 20px 0",
                  "color": "white"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "_comment_": "DIV TWO",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "align-items": "left",
          "max-width": "98%px",
          "min-width": "155px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "font-size": "15px",
              "txtContent": "='Answer: ' + [$Answer]",
              "font-weight": "normal",
              "color": "white"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "='Answer: ' + [$Answer]",
                "style": {
                  "padding-right": "5px",
                  "display": "=if([$Answer] == '', 'none', 'block')"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "font-size": "15px",
              "font-weight": "normal"
            }
          }
        ]
      }
    ]
  }
}

Github is a good resource for examples of different types of column and view formatting https://github.com/pnp/List-Formatting.

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)