Streaming live at 10am (PST)

How to use "width: fit-content;" in Webflow?

I have a div as flex and row of the pictures inside
But it automatically take a full width of block

How to set it up to cut the div width, if images is end?

I need it because div border feels empty from right, need to attach it to content


I fount that I can use “width: fit-content;” style
But how to make it work in Webflow?

Read-only link: Webflow - Div Polygon

@Vladimir2 can you share the project’s read-only link?

Yes, please: Webflow - Div Polygon

I finally found this solution, but can I implement it in Webflow?

Ive tried to add it as custom CSS and it works for text blocks, but don’t works in bunch of images which is in my scenario

Hey @Vladimir2 The class names in the snippet don’t match the class names in you project. This is why it’s not working in the project. In the custom code change .parent to .div-block-2 and change .children to .image. If you change the class names in the Webflow style panel, you will also need to remember to update the class names in the customer code.

Hope that helps. Happy designing.

1 Like

Sorry for the confusion. Screenshots are from my project, and the read-only link is separate for this situation.

Now I fixed the class names, that’s not a case(

Okay I almost solved it

<style>
.div {
      width: fit-content;
}
</style>

can be added in CSS manually in /dashboard/sites/…/code

it works with PX width, but to my bad, logically can’t work with % width

fit-content means that the content must have an explicit size that it can communicate to the property. Display should be set to block. fit-content - CSS: Cascading Style Sheets | MDN

Grid has this content sizing functionality built-in to Webflow so you could use min or max content on the parent container to achieve this.