d-flex doesn't render horizontally

[nazarifard]

Description

instead of a horizontal layout, the items are arranged vertically

Steps to reproduce

  <Box className="container">
      <Box className="d-flex flex-row grid-cols-3 gap-2 p-3"> {/* Incorrect behavior */}
        <Box className="border p-3">Item 1</Box>
        <Box className="border p-3">Item 2</Box>
        <Box className="border p-3">Item 3</Box>
      </Box>
      </Box>

Version

v37.12.0

Browser

Chrome, Edge

[NikhilChandK]

If you want a horizontal flexbox layout, remove grid-cols-3 and rely only on d-flex flex-row:

<Box className="container">
   <Box className="d-flex flex-row gap-2 p-3"> 
     <Box className="border p-3">Item 1</Box>
     <Box className="border p-3">Item 2</Box>
     <Box className="border p-3">Item 3</Box>
   </Box>
</Box>

If you prefer a grid layout, remove d-flex flex-row and use Tailwind's grid system properly:

<Box className="container">
   <Box className="grid grid-cols-3 gap-2 p-3"> 
     <Box className="border p-3">Item 1</Box>
     <Box className="border p-3">Item 2</Box>
     <Box className="border p-3">Item 3</Box>
   </Box>
</Box>

• d-flex flex-row ensures a horizontal flexbox layout.
• grid grid-cols-3 correctly applies a three-column grid in Tailwind.

[nazarifard]

<Box className="container">
  <Box className="d-flex flex-row"> 
    <Box >Item 1</Box>
    <Box >Item 2</Box>
    <Box >Item 3</Box>
  </Box>
</Box>

doesn't work.

[Player1270606]

### ###

Item 1 Item 2 Item 3