Going out of screen

When the parent and child both are set to 100% width in Flex Layout, Flex Direction as Column, the child is going out of screen as you see here. The one marked in RED, is the one going out of screen whereas the second one is not but the problem is, it doesn’t work when the direction is changed to Row


My objective is to make them responsive and have full width equivally occupied

the second is not set to 100% width

Note that in CSS, margins and paddings are added to the 100% width, making it wider than you would probably expect. One option in this case is to use border-box to make the margins and paddings be contained within the 100% width box-sizing - CSS: Cascading Style Sheets | MDN

Yes this helped, and I set these cards to flex-grow to 1 to occupy widths equally

Hope that is correct

may be the grid layout is the best fit to have the components have automatically equal widths

I’ll try and see how it works

No it is not dynamic. We’ve let it know how many columns in advance

LumoUtility.Flex.AUTO also sets equal widths instead of setting flex-grow = 1 on every component