I have view that has a root flex container. Inside I have an embedded title bar and then a column container.
Inside the column container are four flex containers that are given a 100% height settings. At large (996px) they are three rows wide. When I start to add multiple pieces of content to an individual flex container it starts scaling out which cause the entire column container to get a scroll bar. How can I get it so the column container does not have a scroll bar at this larger pixel size, but instead the individual flex container will have a scroll bar.
My current settings for the column container:
Current Settings for the flex container:
Is this something that will I have to use the stylesheet for? Any help is appreciated.
I can't tell you from the top of my head, I'll give it a shot tomorrow when I have access to a designer, but in the meantime, here's a tip: You can use borderRadius: 20 or border-radius: 20 to assign a radius to all 4 corners at once.
You can even give them different values like this: borderRadius: 4 2 4 2
I know the style editor sets the properties separately, but it's messy.
In much the same way, you can unite the border settings: border: 10px solid #333333.
From 10 properties down to 5 in your case.
2 Likes
Thank you I look forward to it. Also thanks for the tip on borderRadius, I have just been using the style editor.
I'm sorry I can't figure out how to do it with a column container.
It's easy with only flex containers, but with the column one I just can't figure it out.
Maybe you can wrap all your columns into a flex container and put that in a column or breakpoint container ?
1 Like
Hopefully I have understood this correctly, but please let me know if not. I assume you are trying to achieve something like the first column, in the screenshot below?
If so, you may struggle to achieve it using the column container directly, unless you set a specific height (px as opposed to %) for the flex containers. Doing this limits the height and gives you the overflow with scrollbar. I think the issue with setting a % height is that the flex container is not respecting the parent container's height (it is exceeding it).
Use Parent Flex Container
As @pascal.fragnoud mentioned, instead of using a column container, you could use a flex container with child flex containers, as below. Doing it this way ensures that the child containers grow with the parent, but also have restricted in their height to the parent's.
