Fix max-width for children elements of the level component
sebnitu opened this issue · 0 comments
sebnitu commented
Problem
The level component currently sets the max-width of all direct children elements. The problem is that this value does not take into account the margins used to the gap between elements. This results in elements overflowing the container when their width is constrained at 100%. A solution to this would be to set the max width minus the gap value:
> * {
...
max-width: calc(100% - var.$gap);
}
This value should also be applied when using the gap and gap-x modifiers.