I'm wondering if it's possible to get a coordinate container to scale in one direction, but overflow in the other while keeping the aspect ratio.
For instance, say I have a really tall view that I want to display on a mobile device (smartphone). Ideally, the width of my coordinate container would scale up to fill the full width of the device, and then the extra height would overflow below and be scrollable.
But if you set the container to fixed, then you can also use css text to fill the height and widths.
So then you could use width:100%, height:auto, you could also use calc(100%-50px) to position things next to eachother.
height auto probably should keep aspect ratio, it would for images atleast idk about other components, but idk what other components would care for ascpet ratio anyways xd
Note, accidently moving it will remove all text, so might want to use a binding if it happends a lot to you.
Basically, I have a long vertical coordinate container that I'd like to scale the entire view so that the width is fully taken advantage of, the aspect ratio of my view stays the same, and then the height is whatever it needs to be, according to the width and the aspect ratio, regardless of if that height is more or less than the vertical space available. Overflow would scroll. I'm not trying to scale the individual components to take up the full width.
I have started to make process flow diagrams with flex containers. It takes away a lot of these types of issues. For instance, have a column container that has a vertical stack of different components and containers that are broken up to fit the different elements. I drew all over your screenshot to try to explain what I mean.. I hope it's not too confusing.
Yellow - flex containers
Red - component instances (e.g. label, tank, the little blue dots that make up the UV bank)
Blue - coordinate container (used for any more intricate process lines)
I could definitely make that work here, but this is a rather simple leg of the process that I'm just using as an example. There are more complex parts of the process where this is not realistic. If this is not already possible this "aspectRatioPrecendence" would be an awesome addition to the aspectRatio property (auto, width, height).
I think I've come up with a combination of a single coordinate view wrapped in a flex container to get close enough to what I wanted.
Create the long view, vertical in this case, using a coordinate container. Use a width that is narrower than all target devices to avoid down-scaling issues. Use percent mode with the aspect ratio set to contain the full view. (300:720 in this case) Add overflow as a property to the view and set it to scroll.
A creative combination of this technique with 2 breakpoint containers (creating a triple breakpoint) allows me to create screens for mobile devices in portrait (horizontal-scroll) and landscape (vertical-scroll) mode and desktop devices using a single 4:3 (1024x768) screen! That's a huge time-saver.
Or, even simpler yet, just check the viewport size as the third breakpoint to toggle between useDefaultViewWidth and useDefaultViewHeight since those two views are identical.