Streaming live at 10am (PST)

Flex child extends to 100% width when wrapping lines

I’ve organized employees names and titles in two different text blocks inside a div-wrapper. The wrapper is a flex-box. When the name of the employee is short, the flex-child that contains the name adjusts its width to match the length of the name (+ padding ofcourse). But whenever the name gets too long and has to wrap to a new line, the whole text block extends to 100% width.

How can I make the text box adjust its width to the longest line of text.


Here is my site Read-Only: LINK

@eirikurdal Please share a working read-only link. Than we are able to help.

1 Like

Sorry, link should be working now.
Here it is as well: https://preview.webflow.com/preview/filla?utm_medium=preview_link&utm_source=designer&utm_content=filla&preview=bca38d927a3d452be728e7723aaaa42b&pageId=5e6ed5bf7ef394b5b254f5c8&mode=preview

Press on “Typography”

  • no Wrap
    image

Further more you should reduce the file sizes of your images, thats make your page slow. They are all way to huge.

Thanks for your quick responses :smiley:

But this does not solve my problem. I want the text to wrap, but I don’t want the text-block to extend to full width when it does not need to. Your solution makes the overshooting text dissapear.
(In the screenshot I have applied it to the name (red)).
Skjermbilde 2020-03-16 kl. 11.25.52

About images - I thought Webflow created multiple versions of my images to keep the page fast-loading. But maybe this doesn’t apply to CMS images?

I found the answer to the responsive images question myself. Background images and images in rich text are not yet supported by webflow’s responsive images functionality. But it is currently marked as «In backlog», which is great!

Article on responsive images: https://webflow.com/blog/new-feature-responsive-images
Wishlist-idea for responsive background images: https://wishlist.webflow.com/ideas/WEBFLOW-I-119