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.

Add Comment
1 Answer(s)

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

Answered on September 1, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.