# Responsive square not being fully constrained by parent container **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [October 2, 2025, 8:40am UTC](https://forum.inductiveautomation.com/t/responsive-square-not-being-fully-constrained-by-parent-container/111152 "2025-10-02T08:40:24Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![david.abrahams](https://avatars.discourse-cdn.com/v4/letter/d/e68b1a/32.png) [@david.abrahams](https://forum.inductiveautomation.com/u/david.abrahams)\ **Post date:** [October 2, 2025, 8:40am UTC](https://forum.inductiveautomation.com/t/responsive-square-not-being-fully-constrained-by-parent-container/111152/1 "2025-10-02T08:40:25Z")
I’m trying to create a responsive square that will automatically resize to fit the size of its container. I’ve tried using `aspectRatio: 1/1`, but whenever I set any width/height/maxWidth/maxHeight styles it seems to either overwrite the aspect ratio or fail to constrain in one direction. Either it constrains vertically and overflows on the horizontal when the parent’s width becomes less than its height, or vice-versa for the horizontal. Is there a set of properties that will make this work as intended? And if not, is there a workaround? ---
**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\ **Post date:** [October 2, 2025, 8:44am UTC](https://forum.inductiveautomation.com/t/responsive-square-not-being-fully-constrained-by-parent-container/111152/2 "2025-10-02T08:44:39Z")
`aspectRatio: 1:1` Im not sure the slash works in this prop. ---
**Author:** ![david.abrahams](https://avatars.discourse-cdn.com/v4/letter/d/e68b1a/32.png) [@david.abrahams](https://forum.inductiveautomation.com/u/david.abrahams)\ **Post date:** [October 2, 2025, 8:51am UTC](https://forum.inductiveautomation.com/t/responsive-square-not-being-fully-constrained-by-parent-container/111152/3 "2025-10-02T08:51:12Z")
I’ve been using 1/1 or 1 throughout the project and it’s been working fine. I’ve just tried 1:1 and it doesn’t appear to work. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/5/2599232af69bc4589e4ca7a8609d8df24090de97.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/7/a7670c8b3d0b271f1bba33e721ffb42beabe2371.png) ---
**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\ **Post date:** [October 2, 2025, 8:53am UTC](https://forum.inductiveautomation.com/t/responsive-square-not-being-fully-constrained-by-parent-container/111152/4 "2025-10-02T08:53:25Z")
Ah, context is important, in the Coordinate Container, aspectRatio is expressed as `1:1`. You did not mention that you were on a flex container using custom styles for that. ---
**Author:** ![david.abrahams](https://avatars.discourse-cdn.com/v4/letter/d/e68b1a/32.png) [@david.abrahams](https://forum.inductiveautomation.com/u/david.abrahams)\ **Post date:** [October 2, 2025, 8:56am UTC](https://forum.inductiveautomation.com/t/responsive-square-not-being-fully-constrained-by-parent-container/111152/5 "2025-10-02T08:56:06Z")
Ah apologies. Yes I have been using a FlexContainer. Is there a solution that works better in a CoordinateContainer? My issue is that it only every constrains on one axis: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/9/5973ee4f5f66b53f074c0906c878a8f787c19266.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/2/c255b680e562edf92b7ffdd310d3f0e924dafd44.png) I’ve tried using `maxWidth` and/or `maxHeight` but it never seems to be able to work for both axis. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [October 2, 2025, 12:47pm UTC](https://forum.inductiveautomation.com/t/responsive-square-not-being-fully-constrained-by-parent-container/111152/6 "2025-10-02T12:47:26Z")
You have the alignItems set to center, you need to set it to strech. You actually don't need the aspectRatio style. Setting it to strech will make it fill the entire height, the grow setting of 1 will make it so that it always fills the width. I've used the aspectRatio here just to duplicate your example. ![animation](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e45c827844cbcc19812ba7d8c2691b3d01cb82b6.gif) ---
**Author:** ![david.abrahams](https://avatars.discourse-cdn.com/v4/letter/d/e68b1a/32.png) [@david.abrahams](https://forum.inductiveautomation.com/u/david.abrahams)\ **Post date:** [October 2, 2025, 12:50pm UTC](https://forum.inductiveautomation.com/t/responsive-square-not-being-fully-constrained-by-parent-container/111152/7 "2025-10-02T12:50:36Z")
That’s not quite what I was aiming for. I wanted the red square to maintain its square shape (all sides the same length), and just resize so it fully fits within its parent container without overflowing. Example: ![Make a truly responsive square with CSS | by Kristoffer Højelse | Medium](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/2/f28d1e52cef5983e6ff0462b1dcf0084b1412d1a.gif) ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [October 2, 2025, 1:32pm UTC](https://forum.inductiveautomation.com/t/responsive-square-not-being-fully-constrained-by-parent-container/111152/8 "2025-10-02T13:32:37Z")
Then set the Grow and Shrink to 0, and Overflow to hidden. Then the size will be set by the basis. ---
**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\ **Post date:** [October 3, 2025, 12:36am UTC](https://forum.inductiveautomation.com/t/responsive-square-not-being-fully-constrained-by-parent-container/111152/11 "2025-10-03T00:36:32Z")
Better version. The 1st wasn’t really responsive in the browser. It just maintained size. This one actually adjusts. It’s setup to be 50% of the width of the viewport. Structure: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/3/637ba0e02b135d57de70a9b644ccc5fb0a0276cd.png) On the Flex Container, bind it’s position.basis like so, with a grow/shrink of 0/0. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/c/ac00bc4cf34eaf484b3c90d7d5878c1f460f1b34.png) You can also use this expression instead, so it responds to both height and width of the window: `toInt(min({page.props.dimensions.viewport.width},{page.props.dimensions.viewport.height})/2)+'px'` On the Label (the square) - set it also to a grow/shrink of 0/0, with it’s position.basis still bound to the position.basis of the flex container. ---
**Author:** ![david.abrahams](https://avatars.discourse-cdn.com/v4/letter/d/e68b1a/32.png) [@david.abrahams](https://forum.inductiveautomation.com/u/david.abrahams)\ **Post date:** [October 7, 2025, 12:06pm UTC](https://forum.inductiveautomation.com/t/responsive-square-not-being-fully-constrained-by-parent-container/111152/12 "2025-10-07T12:06:41Z")
Sorry for the late response, That works perfectly, I’d thought of doing it that way using css but I must’ve mis-typed it previously or had the arrangement incorrect. ```python calc(min(100vw, 100vh)/1.5) ``` For anyone else who stumbles across this, this will be much more responsive than an expression binding.