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).
@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.
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.
@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.