Making width mean width in CSS

By default width is the content only, and every border you add makes the box bigger.

*,
*::before,
*::after {
  box-sizing: border-box;
}

.panel {
  /* 20rem total, not 20rem plus 3rem of padding and border */
  inline-size: 20rem;
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
}

.truncating-flex-child {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

How it works

1. border-box includes padding and border in the width you asked for.
2. Setting it on everything, inheriting it, is the one-line fix.
3. min-width: 0 undoes the minimum a flex or grid item gives itself.

Keywords and builtins used here

• border
• overflow
• padding
• panel
• px
• rem

The run, in numbers

Lines

19

Characters to type

299

Tokens

57

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 46 seconds.

Type this snippet

Step 2 of 6 in Boxes, step 15 of 26 in Selectors & the box model.

← Previous Next →