[BUG]Perspective - OverflowX/Y not working as expected

I have an embedded view in the screenshots below, where I'm changing the view.root.style.overflowX and overflowY values, as I want the horizontal overflow to be visible and the vertical to be auto so that the alert shows properly (it extends 5px beyond the bounds of the container that it's in using margin: 0 -5px so that it defeats the 5px margin applied to the whole container which pulls the rest of the components off of the edge of the outer panel container - I want the alert to actually touch the sides)

Setting the overflow: visible works and doesn't display scrollbars, but the issue is that it also doesn't show scrollbars if the screen is too short... so I want the vertical scrollbar to show and not the horz.
view.root.styles
image

If I instead change the style to overflowX: visible (and overflowY: auto - presumably the default is auto though, however I've tried both defining and not-defining it), then I get scrollbars in both directions :confused:
view.root.styles
image

Basic View definition to demonstrate. Note that setting overflowX/Y/Blank to visible all do exactly the same thing.

{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 428,
      "width": 446
    }
  },
  "root": {
    "children": [
      {
        "children": [
          {
            "meta": {
              "name": "Label"
            },
            "position": {
              "basis": "60px",
              "shrink": 0
            },
            "props": {
              "style": {
                "backgroundColor": "#BCF7AB",
                "margin": "0 -15px"
              },
              "text": "Alert Banner"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_0"
            },
            "position": {
              "basis": "60px",
              "shrink": 0
            },
            "props": {
              "text": "Item"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_1"
            },
            "position": {
              "basis": "60px",
              "shrink": 0
            },
            "props": {
              "text": "Item"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_2"
            },
            "position": {
              "basis": "60px",
              "shrink": 0
            },
            "props": {
              "text": "Item"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_3"
            },
            "position": {
              "basis": "60px",
              "shrink": 0
            },
            "props": {
              "text": "Item"
            },
            "type": "ia.display.label"
          }
        ],
        "meta": {
          "name": "Overflow"
        },
        "position": {
          "basis": "200px",
          "grow": 1
        },
        "props": {
          "direction": "column",
          "style": {
            "backgroundColor": "#E0D6BD",
            "margin": "15px",
            "overflow": "visible"
          }
        },
        "type": "ia.container.flex"
      },
      {
        "children": [
          {
            "meta": {
              "name": "Label"
            },
            "position": {
              "basis": "60px",
              "shrink": 0
            },
            "props": {
              "style": {
                "backgroundColor": "#BCF7AB",
                "margin": "0 -15px"
              },
              "text": "Alert Banner"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_0"
            },
            "position": {
              "basis": "60px",
              "shrink": 0
            },
            "props": {
              "text": "Item"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_1"
            },
            "position": {
              "basis": "60px",
              "shrink": 0
            },
            "props": {
              "text": "Item"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_2"
            },
            "position": {
              "basis": "60px",
              "shrink": 0
            },
            "props": {
              "text": "Item"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_3"
            },
            "position": {
              "basis": "60px",
              "shrink": 0
            },
            "props": {
              "text": "Item"
            },
            "type": "ia.display.label"
          }
        ],
        "meta": {
          "name": "OverflowX"
        },
        "position": {
          "basis": "200px",
          "grow": 1
        },
        "props": {
          "direction": "column",
          "style": {
            "backgroundColor": "#E0D6BD",
            "margin": "15px",
            "overflowX": "visible",
            "overflowY": "auto"
          }
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}

Just to clarify, what I expect in this screenshot in the bottom container is for the alert banner to look like the top version (since overflowX = visible) ( :x:), and there be a vertical scrollbar (which there is, :white_check_mark:)

I actually ran into this same headache when building a custom table view. I eventually stumbled across a SO post that indicated this is a CSS bug.

well... looks like that bug has been a bug since before CSS existed :frowning:

it's good to know though, cheers.

I guess I'll just hope that no one opens a clients on a stupidly short screen.....

Ha yeah, I wouldn't hold my breath on a fix! It wouldn't be ideal, but you could nest everything in an additional view that is sized large enough to not trigger a horizontal scroll. You set your current views to visible and then that would allow you to get it so that just the y direction scrolls in this parent view. Probably not worth the hassle.