I have two blocks horizontal to each other. The first is a flex wrap and the second is a normal block. I want the flex wrap to only take up as much space as it needs for the elements it contains. I can’t fix this by setting a width, because the width it needs will vary depending on the wrapping.
Chrome developer tools shows a purple area with dashed lines suggesting there is extra space in the flex wrap not being used by the child elements, pushing out the other block to the far-right of the screen. For some reason, I can’t seem to figure out how to tell the flex-wrap to only take up the space its child elements need.
Unrelated question: is it possible to setup parallel action flows in the codeless UI builder, so that two sets of actions run simultaneously, rather than one after the other? I’m trying to reduce load time on pages that have a a few queries and API calls that don’t really need to wait on each other.
Could you please provide your appId and specify on which page this layout is located?
As for the second question, you can use the Run Code Async Block.
The right block only appears when loaded on a wide browser-screen (this is intentional). Then, the gap appears depending on how the browser window is resized as the wrapping on the left changes things.
Thank you! The behavior you’re experiencing is indeed expected when using flex-wrap within a flex container. Flex containers by default attempt to use as much space as is available, even when their children wrap to new lines.
This happens because a flex container’s default behavior is to stretch its items to fill the space. When items wrap, the container doesn’t automatically resize to fit just the content—it still spans the maximum width allowed by its parent element.
Got it. How do I fix it though, so the left block only takes up as much space as the items it contains? I’ve been able to do this successfully on other pages (see attached), but I can’t figure out why it works the way I intended on some pages and not others.
As my colleague mentioned earlier on the first page, the first block will keep stretching until all elements fit on a single line. Only after that will it stop stretching.
On the second page, however, everything is implemented differently, which is why it behaves as it does.
You might want to take a look at this StackOverflow topic for a possible solution.
Alternatively, you could modify the structure to resemble how it is done on the second page.
