Horizontal layout width 100% does not fit the parent layout

After migrating to Vaadin 24 some of my Horizontal layouts have random width, seems like they do not fit the parent and the width is just random in some cases.

I got this:
`VerticalLayout main = new VerticalLayout();
HorizontalLayout one = new HorizontalLayout();
HorizontalLayout two = new HorizontalLayout();
HorizontalLayout three = new HorizontalLayout();

StyledText titleOne = new StyledText(“Offers”); (this is a class that extends DIV and adds a Text to it)
StyledText titleOne = new StyledText(“Forms”);
StyledText titleOne = new StyledText(“Dicts”);

main.add(titleOne , one, titleTwo, two, titleThree, three);`

all of the layouts have width 100% either in css file or by setWidthFull() method.
One, two and three contain buttons - number of buttons depends on user role, thus the scaling and fitting the window is needed here, each button also has width 100%.
After migrating to vaadin 24 the StyledTexts stay in the middle and always fit the window.
Layout one has 2 buttons and ends at 60% of the window despite having width 100%
Layout two is slightly bigger than the window
Layout three is waaaay too big, its more that 2 times the browser width

Two and Three are causing to horizontal scroll to appear at the bottom of the browser which is really not user friendly.
All of the layouts did fit the browser window before, they grew or shrank if needed, but now it seems not to be the case.

Were there any changes to HorizontalLayout that may cause this type of behaviour?

Have you checked the Dom in the dev tools of your browser?

yeah i checked now, styles for two and one were missing, i added them again so now all the layouts are 2-3 times wider that the browser window, yet the peer layouts fit the browser

if i have 3 buttons and i set width 33% for each i get a good look, but shouldnt it work with each button 100% width aswell just to fit the parent?

since i dont know number of buttons i cannot hardcode the width value here

Don’t apply setWidth to the buttons.

when i remove setWidth completely the buttons are not equal size and dont fit the parent width, a button named “DICT” i smaller than a button with “LOAN OFFERS” name

i got it… turns out there is flex-shrink: 0 added to :host part of vaadin-button

overriding it to flex-shrink: 1 does the trick

it is also in the guide… :smile:
image.png

Just staiting: You can also use a Menu bar, this sounds like a better solution than multiple buttons