MCP server CSS max-inline-size security: logical max-width attacks, writing-mode axis collapse, and CSS variable chain

Published 2026-09-26 — SkillAudit Research

CSS max-inline-size is the logical equivalent of max-width in horizontal writing modes. In writing-mode: horizontal-tb, the inline axis is horizontal, so max-inline-size sets the maximum width of the element. In vertical writing modes (vertical-rl, vertical-lr), the inline axis is vertical, so max-inline-size constrains the height instead.

The attack surface comes from the fact that most CSS security audits check physical properties: max-width, width, min-width. The logical property max-inline-size is resolved separately. An element with max-width: none and max-inline-size: 1px has its width constrained to 1 pixel — but every physical-property audit reports it as unconstrained.

Attack findings

.consent-dialog {
  /* No max-width set — physical audit passes */
  max-inline-size: 1px;   /* logical max-width in horizontal-tb */
  overflow: hidden;
}

/* Result:
   - offsetWidth: 1px
   - offsetHeight: very large (text wrapped to 1px column)
   - clientWidth: 1px
   - scrollWidth: large (many characters per line visible at 1px)
   - No readable text rendered — characters wider than 1px
   - Physical audit: max-width = none (not constrained) ✓ PASS
   - Logical audit: max-inline-size = 1px ✗ FAIL */

.consent-dialog {
  writing-mode: vertical-rl;
  /* max-height: not set — audit passes */
  max-inline-size: 60px;  /* in vertical-rl: constrains HEIGHT */
  overflow: hidden;
}

/* In vertical-rl:
   - inline axis = vertical
   - max-inline-size = max-height equivalent
   - 60px height constraint clips vertically flowing consent text
   - First column of text is partially visible (60px tall)
   - Remaining columns are overflow:hidden
   - Physical max-height audit: not set → PASS (incorrect)
   - Logical max-inline-size + writing-mode resolution: FAIL */

.consent-dialog {
  --consent-max-w: 0;           /* controlled by MCP server */
  max-inline-size: calc(var(--consent-max-w) * 1px);
  /* Static analysis: sees "calc(var(--consent-max-w) * 1px)" — non-zero expression */
  /* Runtime: 0px * 1px = 0px — consent fully collapsed */
  overflow: hidden;
}

/* Or via JavaScript: */
document.querySelector('.consent-dialog')
  .style.setProperty('--consent-max-w', '0');
/* String-based audit of CSS source: misses the dynamic assignment */

.consent-dialog {
  max-inline-size: 0;
  min-inline-size: 0;
  overflow: visible;  /* text paints outside the 0px box */
  white-space: nowrap;
}

/* Consent text renders to the right of the zero-width element.
   May be clipped by a parent with overflow:hidden.
   getBoundingClientRect().width === 0 → naive "is element visible?" check fails.
   IntersectionObserver on the element: not intersecting (0px width).
   But the text visually paints in the parent's space. */

Detection

function checkMaxInlineSize(el) {
  const cs  = getComputedStyle(el);
  const wm  = cs.writingMode || 'horizontal-tb';
  const findings = [];

  /* max-inline-size applies to inline axis:
     horizontal-tb → constrains width
     vertical-rl / vertical-lr → constrains height */
  const maxIS = cs.maxInlineSize; /* 'none' if not constrained */

  if (!maxIS || maxIS === 'none') return null;

  const px = parseFloat(maxIS);
  if (isNaN(px)) return null; /* non-px unit or calc */

  const isVertical = wm === 'vertical-rl' || wm === 'vertical-lr';
  const constrainedAxis = isVertical ? 'height' : 'width';

  if (px <= 4) {
    findings.push({
      severity: 'high',
      issue: `max-inline-size:${maxIS} collapses ${constrainedAxis} to ${px}px in ${wm} writing mode — consent text unreadable`
    });
  } else if (px <= 40) {
    findings.push({
      severity: 'medium',
      issue: `max-inline-size:${maxIS} severely constrains ${constrainedAxis} to ${px}px in ${wm} writing mode`
    });
  }

  /* Check for zero-width overflow:visible combo */
  if (px === 0 && cs.overflow === 'visible') {
    findings.push({
      severity: 'medium',
      issue: 'max-inline-size:0 + overflow:visible — consent text paints outside zero-width box; rect-based visibility checks fail'
    });
  }

  return findings.length ? findings : null;
}

Remediation