Flexbox Not Working with Modern Form Header (Configure Layout Using JSON)

[Darian Glover]

Greetings,

I am attempting to customize the header of the out-of-the-box (OOB) form header using the Configure Layout JSON feature. I'd like to have an icon in the upper left, a title section to the right of the icon, and instructional text beneath both. This can be easily be done with the help of the HTML to Formatter (pnp.github.io). While my code works within the formatter and elsewhere it does not work within the form in my tenant.

I've looked for CSS styles that would be in conflict and tried several flexbox workarounds for breaking to a new row. Does anyone have solutions to this?

Rendered Everywhere Except within SharePoint Pages

Note the row break between Header Position and the Form Instruction Position.

Rendered in SharePoint Page

Note that there is no break between Header Position and the Form Instruction Position.

Original HTML Code

<div>
  <div id="FormHeaderContainer">
    <div id="IconPosition">Icon Position</div>
    <div id="HeaderPosition">Header Position</div>
  </div>
  <div id="InstructionPosition">Form Instruction Position. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a massa ante. Phasellus mattis felis non tortor bibendum, in laoreet tortor auctor. Nulla varius, nibh eget sollicitudin iaculis, urna mauris finibus mauris, at malesuada mi ante eget metus. Cras aliquam mauris urna, nec rutrum purus laoreet vitae.</div>
</div>

CSS Code

#FormHeaderContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
  font-style: italic;
}

#FormHeaderContainer > #IconPosition {
  color: red;
  }
#FormHeaderContainer > #HeaderPosition {
    flex-basis: 100%;
    display: flow-root;
    color: blue;
  }
#FormHeaderContainer > #InstructionPosition {

  }

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "debugMode": true,
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "row",
        "width": "100%",
        "font-style": "italic"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "color": "red"
          },
          "txtContent": "Icon Position"
        },
        {
          "elmType": "div",
          "style": {
            "flex-basis": "100%",
            "display": "flow-root",
            "color": "blue"
          },
          "txtContent": "Header Position"
        }
      ]
    },
    {
      "elmType": "div",
      "txtContent": "Form Instruction Position. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a massa ante. Phasellus mattis felis non tortor bibendum, in laoreet tortor auctor. Nulla varius, nibh eget sollicitudin iaculis, urna mauris finibus mauris, at malesuada mi ante eget metus. Cras aliquam mauris urna, nec rutrum purus laoreet vitae."
    }
  ]
}

[#2 · Accepted solution]

@Darian Glover 
Add a flex style at the root div of your JSON - 

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "debugMode": true,
    "elmType": "div",
    "style": {
        "display": "flex",
        "flex-direction": "column"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "flex-direction": "row",
                "width": "100%",
                "font-style": "italic"
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "color": "red"
                    },
                    "txtContent": "Icon Position"
                },
                {
                    "elmType": "div",
                    "style": {
                        "flex-basis": "100%",
                        "display": "flow-root",
                        "color": "blue"
                    },
                    "txtContent": "Header Position"
                }
            ]
        },
        {
            "elmType": "div",
            "txtContent": "Form Instruction Position. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a massa ante. Phasellus mattis felis non tortor bibendum, in laoreet tortor auctor. Nulla varius, nibh eget sollicitudin iaculis, urna mauris finibus mauris, at malesuada mi ante eget metus. Cras aliquam mauris urna, nec rutrum purus laoreet vitae."
        }
    ]
}

[#3]

Thanks!