List View Formatting child element width in percentages is rendered differently when hideSelection=false than when hideSelection=true

[waholayo]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

Declarative list formatting

Developer environment

None

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [X] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

Edge 115.0.1901.183 (Official build) (64-bit) Chrome 115.0.5790.102 (Official Build) (64-bit) Firefox 115.0.3esr (64-bit)

Describe the bug / error

In List View Formatting, when specifying the element widths div in percentages and setting hideSelection to false, the widths of the child div elements varies for each row; while setting hideSelection to true, the widths of the child div become the same for each row.

Specifying width in percentage makes this CSS table responsive to window resizing. The View Formatting JSON is derived from sample https://github.com/pnp/List-Formatting/tree/master/view-samples/custom-header.

Steps to reproduce

1. Create a List and choose some columns to be shown;
2. Create some items with non-empty values for the columns;
3. Format View:

   {
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
   "debug": true,
   "hideSelection": false,
   "hideColumnHeader": true,
   "rowFormatter": {
   "elmType": "div",
   "style": {
     "display": "flex",
     "flex-direction": "column",
     "align-items": "flex-start",
     "max-width": "1200px"
   },
   "children": [
     {
       "elmType": "div",
       "__comment": "thead",
       "attributes": {
         "class": "sp-css-backgroundColor-themeLight"
       },
       "style": {
         "display": "=if(@rowIndex == 0, 'flex', 'none')",
         "width": "=(1-(40/@window.innerWidth))*100+'%'",
         "padding": "0.2em 1em",
         "border-width": "0.5px",
         "border-color": "lightgray",
         "border-style": "dotted"
       },
       "children": [
         {
           "elmType": "div",
           "txtContent": "lookup 1",
           "style": {
             "flex-grow": "1",
             "align-items": "left",
             "width": "5%",
             "min-width": "2em",
             "padding": "0.2em 1em 0.2em 0em",
             "border-width": "0.5px",
             "border-color": "lightgray",
             "border-left-style": "dotted"
           }
         },
         {
           "elmType": "div",
           "txtContent": "Title",
           "style": {
             "flex-grow": "1",
             "align-items": "left",
             "width": "20%",
             "min-width": "12em",
             "padding": "0.2em 1em",
             "border-width": "0.5px",
             "border-color": "lightgray",
             "border-left-style": "dotted"
           }
         },
         {
           "elmType": "div",
           "txtContent": "calculated",
           "style": {
             "flex-grow": "1",
             "align-items": "left",
             "width": "35%",
             "min-width": "15em",
             "padding": "0.2em 1em",
             "border-width": "0.5px",
             "border-color": "lightgray",
             "border-left-style": "dotted"
           }
         },
         {
           "elmType": "div",
           "txtContent": "lookup 2",
           "style": {
             "flex-grow": "1",
             "align-items": "left",
             "width": "10%",
             "min-width": "7em",
             "padding": "0.2em 1em",
             "border-width": "0.5px",
             "border-color": "lightgray",
             "border-left-style": "dotted"
           }
         }
       ]
     },
     {
       "elmType": "div",
       "__comment": "tbody",
       "style": {
         "display": "flex",
         "width": "=(1-(40/@window.innerWidth))*100+'%'",
         "min-height": "3.5em",
         "padding": "0em 1em",
         "border-width": "0.5px",
         "border-color": "lightgray",
         "border-style": "dotted",
         "border-top-style": "none"
       },
       "children": [
         {
           "elmType": "div",
           "txtContent": "[$lookupColumn.lookupValue]",
           "style": {
             "flex-grow": "1",
             "align-items": "left",
             "text-wrap": "wrap",
             "white-space": "normal",
             "width": "5%",
             "min-width": "2em",
             "padding": "0.2em 1em 0.2em 0em",
             "border-width": "0.5px",
             "border-color": "lightgray",
             "border-left-style": "none"
           }
         },
         {
           "elmType": "div",
           "txtContent": "[$Title]",
           "style": {
             "flex-grow": "1",
             "align-items": "left",
             "text-wrap": "wrap",
             "white-space": "normal",
             "width": "20%",
             "min-width": "12em",
             "padding": "0.5em 1em",
             "border-width": "0.5px",
             "border-color": "lightgray",
             "border-left-style": "dotted"
           }
         },
         {
           "elmType": "div",
           "txtContent": "[$calculated]",
           "style": {
             "flex-grow": "1",
             "align-items": "left",
             "text-wrap": "wrap",
             "white-space": "normal",
             "width": "35%",
             "min-width": "12em",
             "padding": "0.5em 1em",
             "border-width": "0.5px",
             "border-color": "lightgray",
             "border-left-style": "dotted"
           }
         },
         {
           "elmType": "div",
           "txtContent": "[$lookupColumn2.lookupValue]",
           "style": {
             "flex-grow": "1",
             "align-items": "left",
             "text-wrap": "wrap",
             "white-space": "normal",
             "width": "10%",
             "min-width": "7em",
             "padding": "0.5em 1em",
             "border-width": "0.5px",
             "border-color": "lightgray",
             "border-left-style": "dotted"
           }
         }
       ]
     }
   ]
   }
   }

4. Toggle bewteen "hideSelection": false, and "hideSelection": true, and preview the difference.

Expected behavior

The widths of the elements should be the same for all rows when specified in percentages, no matter the value of hideSelection.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.