CSS: “flex-wrap”: “no-wrap” is not a “flex-wrap” value.

The correct value is nowrap (without a hyphen), not no-wrap.

The flex-wrap CSS property controls whether flex items are forced onto a single line or can wrap onto multiple lines. It accepts three values: nowrap (the default), wrap, and wrap-reverse. A common mistake is writing no-wrap with a hyphen, likely because the white-space CSS property uses nowrap and no-wrap interchangeably in some contexts, or simply because it looks more natural in English. However, for flex-wrap, only the unhyphenated nowrap is valid.

HTML Example With the Issue

<div style="display: flex; flex-wrap: no-wrap;">
  <p>Item 1</p>
  <p>Item 2</p>
</div>

Fixed HTML Example

<div style="display: flex; flex-wrap: nowrap;">
  <p>Item 1</p>
  <p>Item 2</p>
</div>

Learn more:

MDN Reference

CSS flex-wrap

→

MDN Reference

CSS Flexible Box Layout

→