Blocks – any way to have editor honor width percentages on child blocks?

Leaving this open in case anyone has a cleaner answer, but just wanted to capture what I ended up going with for the time being. Looking at how WordPress handles some of their native blocks, it looks like they set the parent editor wrapper’s width imperatively in px, even when its set by the user in percent. Keeping with this framework, I decided to do a bit of imperative stuff in the component, as follows:

function EditComponent({ attributes, setAttributes }) {
  const width = useWindowWidth();
  const blockProps = useBlockProps({});
  const innerBlockProps = useInnerBlocksProps(blockProps);
  const divRef = useRef();

  useEffect(() => {
    var wrapper = thisRef.current.parentNode;
    var widthReference = wrapper.parentNode;
    var widthToSet =
      width > 1024
        ? attributes.large.width
        : width > 768
        ? attributes.medium.width
        : attributes.small.width;
    if (!widthToSet.includes("%")) return;
    var widthPercent = parseInt(widthToSet.replace("%", "")) / 100;
    setEditorWidthInPx(
      widthReference.getBoundingClientRect().width * widthPercent
    );
  }, [width, attributes]);

  return (
    <>
      <InspectorControls>
        <PanelBody title="Width" initialOpen={false}>
          <PanelRow>
            <UnitControl
              value={attributes.small.width}
              label="Column Width"
              onChange={(val) => setAttributes({ width: val })}
            />
          </PanelRow>
        </PanelBody>
      </InspectorControls>
      <div
        ref={divRef}
        {...innerBlockProps}
        style={{
          width: attributes.width,
        }}
      ></div>
    </>
  );
}

My useEffect watches both the window’s width and the attributes, and on any changes, it grabs the column element, its parent and its grandparent, grabs the width value, and if it’s in percent, calculates the pixel value relative to the grandparent container and manually sets the element’s width in pixels.