Min/Max Width

Constraints on element width.

html

<div class="mw-wrap" role="img" aria-label="A box asking for one width but clamped by min-width and max-width; the rendered width is never outside that range">
  <div class="mw-track">
    <div class="mw-box" style="width:260px;min-width:120px;max-width:220px;background:#D9C8F0;">box</div>
  </div>
  <p class="mw-caption">requested 260px &middot; min-width 120px &middot; max-width 220px &mdash; the browser clamps automatically</p>
</div>
<style>
.mw-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 340px; }
.mw-track { background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; box-sizing: border-box; }
.mw-box { padding: 14px; border-radius: 6px; font-weight: 700; text-align: center; box-sizing: border-box; }
.mw-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[340px]" role="img" aria-label="A box asking for one width but clamped by min-width and max-width; the rendered width is never outside that range">
  <div class="bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 box-border">
    <div class="rounded-md p-3.5 font-bold text-center box-border" style="width:260px;min-width:120px;max-width:220px;background:#D9C8F0;">box</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">requested 260px &middot; min-width 120px &middot; max-width 220px &mdash; the browser clamps automatically</p>
</div>

react

export function MinMaxWidth({
  requested = 260,
  min = 120,
  max = 220,
  background = "#D9C8F0",
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 340 }}
      role="img" aria-label="A box asking for one width but clamped by min-width and max-width; the rendered width is never outside that range">
      <div style={{ background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 12, boxSizing: "border-box" }}>
        <div style={{ width: requested, minWidth: min, maxWidth: max, background, borderRadius: 6, padding: 14, fontWeight: 700, textAlign: "center", boxSizing: "border-box" }}>
          box
        </div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        requested {requested}px &middot; min-width {min}px &middot; max-width {max}px &mdash; the browser clamps automatically
      </p>
    </div>
  );
}