Gap owerflow on wrapping elements

[okaune]

Describe the bug Have not investigated this thoroughly, but there seems to be a problem with the gap property on elements that wrap. The intended functionality to remove spacing on the ends of the container with negative margins, make the padding on the right side of the children to overflow the container. This is most notable on mobile layouts.

EDIT: Child elements of Layout item overflows if not box-sizing: border-box;

[oyvindhermansen]

Can you make a codesandbox or something to reproduce the problem?

[okaune]

https://codesandbox.io/s/wz69wn428w

[oyvindhermansen]

I actually have no idea how to fix this problem. Have you investigated some more @okaune , or are we no closer to fixing this? I think we should focus on getting a fix on this, since this is a rather important implementation detail.

[okaune]

Will investigate this bug this afternoon. Pretty sure I know why it is happening, just don't know how to fix it

[okaune]

I think the problem is that when calculating the basis of layout items, we are not taking gap into consideration, so when gap is added, the total size of the elements (that cannot shrink) exceeds the container size

[oyvindhermansen]

Good catch. I also found out that gap is not working correctly if the child of the Layout item does not have box-sizing: border-box;. Should we apply this to all children maybe?

[okaune]

You mean something like:

& > * {
  box-sizing: border-box;
}

I think it would be fair to set the property for direct child elements, since it's size is confined to the parent element.

[oyvindhermansen]

Yes, exactly! Run a test in storybook to confirm this before we eventually merge a fix 👍

[okaune]

To solve the gap issue we need to know the gap property of the parent element to get the correct basis. What would be the best way to have access to this prop?