Hey Builders!
I’m excited to share with you that Max-Content , an advanced width sizing unit, is now available for Containers, Vertical Sections, Text elements, Buttons and Flexbox items.
Max-Content elements will fit themselves to their children’s maximum content size, such as texts and elements with independent sizes(px, vw, vh).
Repeater Example
Vertical Section
Enjoy and happy building! 
This is amazing!!!
I’ve been waiting for this for so long!
@jonathant This really needs to be brought to styled buttons as well…not just basic buttons which are soon to be deprecated anyways…
@jonathant Apparently images don’t count as ‘children’? I set it to min height 100w 80vh, and it just gets cropped (with show overflow turned on mind you), while the width is calculated by something else.
Multiple elements in a grid doesn’t go into consideration? they just get pushed one under the other instead of keeping side by side?
I was so hopeful for this, but alas, no cigar.
adding pictures, what I need vs what I get.
Hey Ronny, notice that Max-Content is a Width sizing unit.
If you want your container to resize according your image, you need to set the image’s width to VW and scale proportionally.
@jonathant If I do that, the entire point is gone, as I want many images with different width and same height. kind of like the text elements no?
But as you can see, at 100%w, 80vh it is scaling proportionally just fine, but gets cropped. You would think the overflow would at least show, where is it?
Looks like some bug.
@jonathant Also what about the text above the image? why is it pushed one under the other? it’s in a container with a grid.
And the item’s grid is set to 40px height, and you can clearly see in my image that it goes under the grid limit
@sabugen I don’t really understand what you’re trying to achieve with the images, please describe the full picture.
Regarding the text, as you can see it breaks because it’s set to less than 100%.
When setting your container to max-content it will acquire the maximum width of your content (100%)
@jonathant
I don’t understand what you mean by text not being set to 100%.
There are two text elements in a grid, so why is it not calculating both of their widths together as max content?
Instead it completely ignores the grid that holds their structure and pushes them one under the other.
As for the complete picture of the images, this is what I’m trying to achieve:
@sabugen Your Grid is set to 1fr, which is a relative unit that acquires a fraction of the parent’s width.
If you want your grid to determine the width you can set it to px or vw.
Your text is not ignored, it breaks because it is not set to 100% width.
If you want specific guidance with your layout let’s take it to a private conversation.
@jonathant
This makes no difference if I make the text 100% or 200% nothing changes.
Also there’s the images issue.
We can talk privately if you prefer it.
@sabugen Yes, feel free to open a thread in the discussions forum with a more detailed description, or DM me on Facebook
Nice, I just want to know how to recreate that vircle section example for a menu.
@jonathant
Figured the text thing, it needs to be set to max content as well.
But the image issue, is still an issue.
How do I find you on Facebook?
The Vertical Section is set to width: Max-C and min-width: 60px
The Repeater is also set to width: Max-C.
The Repeater items have a 2 column grid [30px, 1fr].
The text in the right column is set to Collapse on load, and with a click of a button I expand them.
Code:
var navOpen = false;
$w('#button2').onClick(() => {
if (navOpen == false) {
$w("#repeater2").forEachItem(($item, itemData, index) => {
$item("#text8").expand();
});
} else {
$w("#repeater2").forEachItem(($item, itemData, index) => {
$item("#text8").collapse();
});
}
navOpen = !navOpen;
});
Very important CSS feature for responsive design good job guys! Please keep rolling out new updates.
Thank you so much
This is a big upgrade for text
An excellent feature a lot of us have been waiting for!
