I’d like to embed a coordinate container inside a flex container in column mode. The coordinate container is set to percent mode, so that everything scales accordingly.
I’d like the coordinate container to scale to the width of the flex container and have the height of the coordinate container scale proportionally.
For example, if the coordinate container has a width-to-height ratio of 2, and the column container is 200px wide, I’d like the coordinate container to be 200px wide and 100px high. If I expand the column container to 400px, I’d like the coordinate container to be 400px wide and 200px high.
I tried putting the coordinate container within a row container and set the grow parameter of the coordinate container to 1 so that it would fill the column container’s width, but then if I set the row container’s basis to auto (so that it could take the scaled height of the coordinate container), the height of the row container goes to zero.
The coordinate container has an aspectRatio property, which is only applied in percent mode. The property defaults to an ‘empty’ string which means that it is disabled.
You can set the aspectRatio to force the container to scale accordingly by giving it a ratio in x:y format.
In your example, you would set as follows - aspectRatio: 2:1 This tells the container to scale twice as much in the X direction (width, horizontal) as it does in the Y direction (height, verticle).
Thanks, lrose, but that didn’t do it. I put together an example project to demonstrate my conundrum.
Inside the project, you’ll find an ExampleColumnFlex view that demonstrates how I’d like my coordinate container to act, and a ProblemColumnFlex view that shows the problem. In that view, if you make the column container too narrow, there is extra space above and below the graphics in the coordinate container, and if you make the column container too wide, there is extra space on either side of graphics in the coordinate container. I need something equivalent to the coordinate container’s basis to auto so that it takes up just the right amount of space.
