I’m trying to create two text elements side by side (as children of a surrounding box). The child on the left is a fixed size. The child on the right is supposed to fill the remainder of the width and then wrap.
Wrapping works properly if “columns” or “stack” is selected as the child layout, but not if "row is selected. How do I get wrapping to work properly if layout is “row”?
Example if “row” is selected (i.e. the text wrapping problem):
Example if “stack” is selected (i.e. wrapping working properly)
Example if “columns” is selected (i.e. another example of wrapping working properly)
Sounds like a CSS flexbox quirk, but I’m having a bit of trouble reproducing, could you link us to a page this is happening to so we can try it out and find a good CSS fix you can use?
You’ll notice another issue, which is that the left boxes should be fixed at 70px (while the right boxes should fill the remainder of space before wrapping), but it looks like there’s another issue in which the left boxes stretch beyond 70px if there’s a small amount of text in the box on the right. Again, this only seems to be an issue when “row” is selected.
I took a look at your page and couldn’t figure out why wrapping isn’t working properly with the “row” layout. For now, you can give each box in the parent element a percentage width & the text will wrap as expected.
Here’s what it looks like with the left box at 15%, and the right box at 85%:
I’ll keep playing around with it to see if I can find the core issue.
The issue with using the percentage width (especially for the left box) is that different screen sizes impact its width in different ways (e.g. the date could wrap on small mobile phones or create too much space on large phones).
The “customgridmarklistsymbol” layer in Builder takes up full width of the column its in (expected behavior), but the content inside of the symbol is bleeding outside of the container like you mentioned.
I noticed that the content inside of the symbol is set to a width of 50vw, which seems to be causing this to occur. The text is actually is wrapping inside of its parent container, I added a screenshot of this below (I added a background color so you can see the text inside of the box which is overflowing from the page).
To resolve this, you can remove flex-shrink: 0 from the text blocks highlighted in your screenshot above or set the flex-shrink value to 1. Giving an element flex-shrink: 0 will make the element not shrink, it will retain the width it needs/not wrap its content.
