The Flex component behaves the same as the Box component except that it has display: flex set by default.
Use Box instead.
Before
<Flex flexWrap="nowrap"><Box p={3} color="fg.onEmphasis" bg="accent.emphasis">Item 1</Box></Flex>
After
<Box display="flex" flexWrap="nowrap"><Box p={3} color="fg.onEmphasis" bg="accent.emphasis">Item 1</Box></Box>
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" width={300} height={300} borderRadius={0}><Flex flexWrap="nowrap"><Box p={3} color="fg.onEmphasis" bg="accent.emphasis">Item 1</Box><Box p={3} color="fg.onEmphasis" bg="attention.emphasis">Item 2</Box><Box p={3} color="fg.onEmphasis" bg="danger.emphasis">Item 3</Box></Flex></Box>
Flex components get FLEX, COMMON, and LAYOUT system props.
Read our System Props doc page for a full list of available props.
Flex does not get any additional props other than the system props mentioned above.