Flex layout - child overflows

Dear Penpot community,

I’m a new user and I’m quickly falling in love with Penpot. However, I struggle with something which is probably a very basic question - I can’t make a flex layout in which the content respects the parent’s width:

The top bar is a board (flex element) with a certain width and “space-between” enabled, with two children, the logo area and the menu items. In the menu items board, the login button is a flex component as well, but when I set the padding on the button to style it, it overflows its parent, the top bar.

What is my mistake?

Thank you for your help!

Best regards

Hello Christian,

Could you share the hierarchy of your layers? I suspect you have an element with a fixed width somewhere.

I tried to replicate your design and I don’t have any problem, here is my layer structure, I added color borders for better visualisation.

1 Like