Closed
Description
Steps To Reproduce
The setup for the component is also listed as code under additional context
- Create board called Grid
- Assign a Grid layout to it (1 row, 2 columns)
- Create another board called Flex
- Assign a Flex layout (column) to it and set the horizontal and vertical align to center and set the width and height to 100%
- Add two rectangles to the Flex board.
- Move the Flex board into the first cell of the Grid board
- Add a rectangle to the second cell of the Grid board
- Select the grid board and press
CTRL+K(make it a component) - Press
CTRL+C,CTRL+Vto make a new instance of this component. - Notice how they look identical
- Drag the instantiated component a tiny bit and notice the dimensions of the flex layout have changed.
Expected behavior
I'm expecting the dimensions of an element to stay the same when dragging a parent
Actual behavior
The dimensions of a child element change when dragging the parent. It only recalculates the proper dimensions if I manually switch to "fixed width" and "fixed height" and back to 100% on both.
Screenshots or video
Overview: 
Selected Flex on Instantiated component:
Selected Flex on dragged component:
Desktop (please complete the following information)
- Windows 10
- Firefox 128.0
Smartphone (please complete the following information)
No response
Environment (please complete the following information)
Frontend Stack Trace
No response
Backend Stack Trace
No response
Additional context
The component code:
{"~:type":"~:copied-shapes","~:features":{"~#set":["layout/grid","styles/v2","components/v2","fdata/shape-data-type"]},"~:version":50,"~:file-id":"~u352e9fc6-6a46-8154-8004-a64884a209e9","~:selected":{"~#ordered-set":["~uf4f8c8ec-4aa8-80d4-8004-a64886b729e2"]},"~:objects":{"~uf4f8c8ec-4aa8-80d4-8004-a64886b729e2":{"~#shape":{"~:y":311,"~:layout-grid-columns":[{"~:type":"~:fixed","~:value":128},{"~:type":"~:flex","~:value":1}],"~:hide-fill-on-export":false,"~:layout-gap-type":"~:multiple","~:layout-padding":{"~:p1":0,"~:p2":0,"~:p3":0,"~:p4":0},"~:transform":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:rotation":0,"~:grow-type":"~:fixed","~:layout":"~:grid","~:hide-in-viewer":false,"~:name":"Grid","~:layout-align-items":"~:start","~:width":327.0000000000001,"~:layout-grid-cells":{"~uf4f8c8ec-4aa8-80d4-8004-a6489cf71d0f":{"~:justify-self":"~:auto","~:column":1,"~:id":"~uf4f8c8ec-4aa8-80d4-8004-a6489cf71d0f","~:position":"~:manual","~:column-span":1,"~:align-self":"~:auto","~:row":1,"~:row-span":1,"~:shapes":["~uf4f8c8ec-4aa8-80d4-8004-a648df16f725"]},"~uf4f8c8ec-4aa8-80d4-8004-a648a92a1f3a":{"~:justify-self":"~:auto","~:column":2,"~:id":"~uf4f8c8ec-4aa8-80d4-8004-a648a92a1f3a","~:position":"~:manual","~:column-span":1,"~:align-self":"~:auto","~:podition":"~:manual","~:row":1,"~:row-span":1,"~:shapes":["~uf4f8c8ec-4aa8-80d4-8004-a648e1fa7e92"]}},"~:layout-padding-type":"~:simple","~:type":"~:frame","~:points":[{"~#point":{"~:x":607,"~:y":311}},{"~#point":{"~:x":934.0000000000001,"~:y":311}},{"~#point":{"~:x":934.0000000000001,"~:y":439}},{"~#point":{"~:x":607,"~:y":439}}],"~:component-root":true,"~:layout-item-h-sizing":"~:auto","~:proportion-lock":false,"~:layout-gap":{"~:row-gap":0,"~:column-gap":0},"~:transform-inverse":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:layout-item-v-sizing":"~:auto","~:layout-justify-content":"~:stretch","~:id":"~uf4f8c8ec-4aa8-80d4-8004-a64886b729e2","~:layout-justify-items":"~:start","~:parent-id":"~u00000000-0000-0000-0000-000000000000","~:layout-align-content":"~:stretch","~:component-id":"~uf4f8c8ec-4aa8-80d4-8004-a649600108a6","~:frame-id":"~u00000000-0000-0000-0000-000000000000","~:strokes":[],"~:x":607,"~:main-instance":true,"~:proportion":1,"~:layout-grid-rows":[{"~:type":"~:fixed","~:value":128}],"~:selrect":{"~#rect":{"~:x":607,"~:y":311,"~:width":327.0000000000001,"~:height":128,"~:x1":607,"~:y1":311,"~:x2":934.0000000000001,"~:y2":439}},"~:fills":[{"~:fill-color":"#FFFFFF","~:fill-opacity":1}],"~:layout-grid-dir":"~:row","~:flip-x":null,"~:height":128,"~:component-file":"~u352e9fc6-6a46-8154-8004-a64884a209e9","~:flip-y":null,"~:shapes":["~uf4f8c8ec-4aa8-80d4-8004-a648e1fa7e92","~uf4f8c8ec-4aa8-80d4-8004-a648df16f725"]}},"~uf4f8c8ec-4aa8-80d4-8004-a648e1fa7e92":{"~#shape":{"~:y":311,"~:rx":0,"~:transform":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:rotation":0,"~:grow-type":"~:fixed","~:hide-in-viewer":false,"~:name":"Rectangle","~:width":199,"~:type":"~:rect","~:points":[{"~#point":{"~:x":735,"~:y":311}},{"~#point":{"~:x":934,"~:y":311}},{"~#point":{"~:x":934,"~:y":370}},{"~#point":{"~:x":735,"~:y":370}}],"~:proportion-lock":false,"~:transform-inverse":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:constraints-v":"~:top","~:constraints-h":"~:left","~:id":"~uf4f8c8ec-4aa8-80d4-8004-a648e1fa7e92","~:parent-id":"~uf4f8c8ec-4aa8-80d4-8004-a64886b729e2","~:frame-id":"~uf4f8c8ec-4aa8-80d4-8004-a64886b729e2","~:strokes":[],"~:x":735,"~:proportion":1,"~:selrect":{"~#rect":{"~:x":735,"~:y":311,"~:width":199,"~:height":59,"~:x1":735,"~:y1":311,"~:x2":934,"~:y2":370}},"~:fills":[{"~:fill-color":"#B1B2B5","~:fill-opacity":1}],"~:flip-x":null,"~:ry":0,"~:height":59,"~:flip-y":null}},"~uf4f8c8ec-4aa8-80d4-8004-a648df16f725":{"~#shape":{"~:y":311,"~:hide-fill-on-export":false,"~:layout-gap-type":"~:multiple","~:layout-padding":{"~:p1":4,"~:p2":19,"~:p3":4,"~:p4":19},"~:transform":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:rotation":0,"~:layout-wrap-type":"~:nowrap","~:grow-type":"~:fixed","~:layout":"~:flex","~:hide-in-viewer":true,"~:name":"Flex","~:layout-align-items":"~:center","~:width":128,"~:layout-padding-type":"~:simple","~:type":"~:frame","~:points":[{"~#point":{"~:x":607,"~:y":311}},{"~#point":{"~:x":735,"~:y":311}},{"~#point":{"~:x":735,"~:y":439}},{"~#point":{"~:x":607,"~:y":439}}],"~:layout-item-h-sizing":"~:fill","~:proportion-lock":false,"~:layout-gap":{"~:row-gap":13,"~:column-gap":0},"~:transform-inverse":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:layout-item-v-sizing":"~:fill","~:layout-justify-content":"~:center","~:id":"~uf4f8c8ec-4aa8-80d4-8004-a648df16f725","~:parent-id":"~uf4f8c8ec-4aa8-80d4-8004-a64886b729e2","~:layout-flex-dir":"~:column","~:layout-align-content":"~:stretch","~:frame-id":"~uf4f8c8ec-4aa8-80d4-8004-a64886b729e2","~:strokes":[],"~:x":607,"~:proportion":1,"~:selrect":{"~#rect":{"~:x":607,"~:y":311,"~:width":128,"~:height":128,"~:x1":607,"~:y1":311,"~:x2":735,"~:y2":439}},"~:fills":[{"~:fill-color":"#FFFFFF","~:fill-opacity":1}],"~:flip-x":null,"~:height":128,"~:flip-y":null,"~:shapes":["~uf4f8c8ec-4aa8-80d4-8004-a648e6fcc2fb","~uf4f8c8ec-4aa8-80d4-8004-a648ecd16d24"]}},"~uf4f8c8ec-4aa8-80d4-8004-a648e6fcc2fb":{"~#shape":{"~:y":364.5,"~:rx":0,"~:transform":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:rotation":0,"~:grow-type":"~:fixed","~:hide-in-viewer":false,"~:name":"Rectangle","~:width":48,"~:type":"~:rect","~:points":[{"~#point":{"~:x":647,"~:y":364.5}},{"~#point":{"~:x":695,"~:y":364.5}},{"~#point":{"~:x":695,"~:y":413.5}},{"~#point":{"~:x":647,"~:y":413.5}}],"~:proportion-lock":false,"~:transform-inverse":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:id":"~uf4f8c8ec-4aa8-80d4-8004-a648e6fcc2fb","~:parent-id":"~uf4f8c8ec-4aa8-80d4-8004-a648df16f725","~:frame-id":"~uf4f8c8ec-4aa8-80d4-8004-a648df16f725","~:strokes":[],"~:x":647,"~:proportion":1,"~:selrect":{"~#rect":{"~:x":647,"~:y":364.5,"~:width":48,"~:height":49,"~:x1":647,"~:y1":364.5,"~:x2":695,"~:y2":413.5}},"~:fills":[{"~:fill-color":"#B1B2B5","~:fill-opacity":1}],"~:flip-x":null,"~:ry":0,"~:height":49,"~:flip-y":null}},"~uf4f8c8ec-4aa8-80d4-8004-a648ecd16d24":{"~#shape":{"~:y":336.5,"~:rx":0,"~:transform":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:rotation":0,"~:grow-type":"~:fixed","~:hide-in-viewer":false,"~:name":"Rectangle","~:width":77,"~:type":"~:rect","~:points":[{"~#point":{"~:x":632.5,"~:y":336.5}},{"~#point":{"~:x":709.5,"~:y":336.5}},{"~#point":{"~:x":709.5,"~:y":351.5}},{"~#point":{"~:x":632.5,"~:y":351.5}}],"~:proportion-lock":false,"~:transform-inverse":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:id":"~uf4f8c8ec-4aa8-80d4-8004-a648ecd16d24","~:parent-id":"~uf4f8c8ec-4aa8-80d4-8004-a648df16f725","~:frame-id":"~uf4f8c8ec-4aa8-80d4-8004-a648df16f725","~:strokes":[],"~:x":632.5,"~:proportion":1,"~:selrect":{"~#rect":{"~:x":632.5,"~:y":336.5,"~:width":77,"~:height":15,"~:x1":632.5,"~:y1":336.5,"~:x2":709.5,"~:y2":351.5}},"~:fills":[{"~:fill-color":"#B1B2B5","~:fill-opacity":1}],"~:flip-x":null,"~:ry":0,"~:height":15,"~:flip-y":null}}},"~:images":{"~#set":[]}}
Activity