nib column() missing max-width constraint for fluid containers

Question

nib column() missing max-width constraint for fluid containers
The goal is to guarantee that a fluid grid defined with nib’s column() mixin does not overflow its parent container. In practice, the mixin currently omits a max-width declaration, which leads to layout breakage when used with fluid units.
Key constraints: compatibility across Stylus releases 0.61–0.63, the behaviour of the --compress flag (which drops max-width), and the interaction with the rupture grid plugin that relies on nib. The documentation does not specify a default max-width fallback, leaving developers uncertain about the intended behaviour.
Unresolved questions:

Does nib provide a default max-width for column() that is currently undocumented?
How does the --compress compilation flag affect the presence of max-width in the generated CSS?
Which Stylus version introduced a reliable max-width fallback, and what migration steps are required for older projects?

Tasadduq Burney · Answer

Answer the question first
Nib’s column() mixin never emits a max-width rule. The mixin only sets width (or flex‑based sizing). When the Stylus CLI is run with --compress, any legacy max-width that might have existed in very old nib releases is stripped. Consequently, a fluid grid that relies on column() can overflow its parent if the parent is constrained.
Why this happens

Nib’s public API does not document a default max-width for column() – all releases up to 0.63 behave the same.
The --compress flag removes any max-width that might be present in older nib releases, leaving only the width declaration.
Rupture, which builds its grid on top of nib, inherits this behavior; it does not add a max-width automatically.

How to guarantee containment

Verify the current output. Run:stylus --compress src/grid.styl -o dist/grid.css
Inspect dist/grid.css for any max-width on elements generated by column().
Wrap the column in a container with a max‑width. For example:.wrapper
  max-width: 1200px
  margin: 0 auto
  &
    column(1)
This guarantees the column never exceeds 1200px regardless of the fluid unit.
Extend the mixin. Create a small wrapper mixin that injects a default max-width while delegating to nib:maxColumn(num, max: 1200px)
  column(num)
  max-width: max
Use maxColumn() in your templates.
Check rupture breakpoints. If you use rupture’s media queries, ensure the added max-width is scoped inside the breakpoint, e.g.:breakpoint(small)
  max-column(1, 600px)

Update nib if possible. While no release adds a default, newer nib versions (0.63+) keep the same behavior. If you’re on a very old nib (<0.60), consider upgrading to at least 0.61 to avoid other regressions.

Migration checklist

Document the Stylus version and nib commit used in your project.
Add a linter rule that warns when a column() element has no max-width and its parent is constrained.
Refactor existing grid uses to either wrap in a container or switch to the maxColumn() helper.
Run a visual regression test on a representative set of browsers to confirm no overflow occurs after changes.

Missing diagnostic detail
To tailor the recommendation further, could you confirm which Stylus release you’re currently using (e.g. 0.61, 0.62, 0.63) and whether you’re employing rupture’s breakpoints in the affected grid?

nib column() missing max-width constraint for fluid containers