CODEWITHSUNDEEP
css
Sean D
Sean D

Reputation: 4292

List fails to wrap with 'flex-flow' set to 'row wrap'

At small browser widths my nav menu is not wrapping:

enter image description here

Adding !important to the flex-flow rule does nothing.

What is the answer to making nav items wrap correctly?

I am considering doing away with the list, using a div container instead, and converting each item to use p tags.

Here are the css rules for the container, which is the <ul> tag.

const NavList = styled.ul`
  list-style-type: none;
  display: flex;
  flex-flow: row-wrap;
  justify-content: space-around;
`

The syntax is from React.js's styled components library.

Upvotes: 0

Views: 35

Answers (1)

Dom
Dom

Reputation: 734

Should be flex-flow: row wrap; without the dash.

Upvotes: 1

Related Questions