sebnitu / vrembem

A CSS component library based on the BEM methodology.

Home Page:https://vrembem.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fix max-width for children elements of the level component

sebnitu opened this issue · comments

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.