Columns overflows inside a container

[LauGroupie95]

Hi,
I opened a blank issue since I'm not sure if it's actually a Bento bug or if it's my fault.
Please, can you tell me why the component Columns composed by 4 columns with width 2/5, 1/5, 1/5, 1/5 overflows the parent component's width?

You can easily verify it in this playroom:
https://playroom.bento.buildo.io/#?code=N4Igxg9gJgpiBcIA8AhCAPABAZwC4E8AbGAXmGEwHcBLKXAC3kwEYBmABncwF9uA%2BADoA7TJiQBlXAEMwAaxwAHGaWDMAbP2GjRSACrVcxHNQBepASAC2MKNQCuli33ExcdhZiFTrmAE53ibCQAen1DGEERbSQAYQhCByFsRWUyAA5NKO0xOITLERo6ejILACZggFYLTOzsvRh0XAAxahhCKC1a7K9rEpAAOQBpas6u0QA3KQSVCyGRrLGIIRj6KSEAcxUACgBKTBI%2BTGBeUcWhFATfMl39w%2BPuU67CKQAjNr6ABQgFAKlcaiW8zG2gUzzAMHo8VgV2AFiBwMw1GwACUYFIoAB5ISEfCPbTBSJdEK5RKRPGxeKJKi0Bh9ZiVaqEsYSNowMDNVrtPHdbwzAYY3SYAAiAEEPgBJeHAybTPr9AXCsWSkAPBZdJYrNaba57A5HE5q2pLC52GE3PX3bnaZ5vQifXzfGC%2BAgsKVjUHKSHtJ19N3qhT-JbYMgAbSt2VhhulUzsMCYswVoolFgANOHaja2vH%2BYKk8q01GxrJqEIoNnsCX1sQALSEEswVPp0TcAsIzAAXVVbaRqPRWJxVoJ5OCJPyZMNFLyBRpxVhIHpVRVTKJugaHLaHULoh6fJF-SFftqMtjfT3B5V6Y1qw2211dwNbeNlx1t31XYRmbtc4xCidfwgviHtkHrgl60K%2BheW6IiiaKYtiuKFkOE4jpSY7COSo7TkUdIMkuVossQ7ItBu6Y7n0TTiroMRAdox58hRVE0aIV5arer6WlBT6mi%2BFoPh%2BrzvHOHwOr%2Bzr4JgpRMZgIEQlCPpzlJ3yBkkoZNkcakTDGcaYBYDHUSArZttaAmENmemNlB2TFqW5aVjWdZCA2BlqS26adumPawf2CHAkhRIoVOy5iAFiTYOOdRoFgeBECoFD0DA1DrPQuBMKUnA8NwmAvDIsjrA6diliQFjZXIeUQAVUBClIviyOIYC%2BNQjggHwISRUyISSDlkStRgkQGSAhQMNgCAhswAAsY3sJ2QA

[gabro]

Hi @LauGroupie95, converting this to a discussion (we can create an issue if something needs to be worked on in Bento itself).

About your issue, I agree it’s a bit confusing but it’s currently working as intended, since the proportions of columns are about the width of the container, so if you sum the widths of the columns you get the total width, but that does not include the gaps.

So if you manually specify 1/5 + 1/5 + 1/5 + 2/5 you get the total width + (4 * gap width).

In general, I don’t think it makes too much sense to specify each width individually, you normally want some constraints, and then let the rest of the columns fill the gaps proportionally.

In you specific example, I would specify the width only for the 2/5 column and the let others share the space automatically. Concretely this:

https://playroom.bento.buildo.io/#?code=N4Igxg9gJgpiBcIA8AhCAPABAZwC4E8AbGAXmGEwHcBLKXAC3kwEYBmABncwF9uA%2BADoA7TJiQBlXAEMwAaxwAHGaWDMAbP2GjRSACrVcxHNQBepASAC2MKNQCuli33ExcdhZiFTrmAE53ibCQAen1DGEERbSQAYQhCByFsRWUyAA5NKO0xOITLERo6ehILACZggFYnLWzo3Rh0XAAxahhCKBra7S9rMgsAOQBpC25OrswANykElQHhkFGs8YghGPopIQBzFQAKAEpMEj5MYF4xrpWUBN8yfcPj08Xx7UIpACM2vpAABQgFAKkuGoKxG51qCleYBg9HisBuwAsoKWXWo2AASjApFAAPJCQj4MGiYKRLohXKJEm1CRtGBgZqtdqEzzeWYgfrY3SYAAiAEFvgBJJHPKYzL7szm8gVC5ardZbXYHI4nM7I7SXa63RUPFXPV4fQhfb6%2BP4wXwEFjSroQ5Qw9qmr6W2p-IErbBkADaTNECNVXRFdhgTAGHO5fMFIAANF6Xu82kG2SHJeGo77arJqEIoPHsBnNsQALSEDMwCwp56ibhl8YAXSe41RGKxuPxYOJYL0DXpbQ6qZ6rJ5-S5juy-v7g%2BHatlG22mvuyrrFyEVzs8LuSseTL1nwRIGxClNgIgvgnomtUNtcIdCyZDcxOLxBNVbdV1OIdJa3aZfa%2BTX5uhiJ6TNMAY-n%2BAHXqmKxrNOCpzhukFLhqwBrtqC61FuBo7kaJpmvgmClIBZ7QrC9o7oBzrAkkHrRj65baKO8a-v%2BpbRqIGGMWBLGptk6aZtmuYFkWQglpG0aVkytY3uid7No%2BXTPtkZLxIk2CRGMqAYDgBDEGQFD0DA1CbPQuBMKUnA8NwmBvDIsibMadiZiUIDWXIdkQA5UBclIviyOIYC%2BNQjggHwIRoOglIhJINmRKFGCRJGICFAw2AIO6pQVGo7C1kAA

Does it make sense?

[LauGroupie95]

Beautiful!
Thank you, I didn't think about the space among the columns