Utilizing flexbox to enable unordered lists to wrap based on content

Here is the current code I have:

HTML


  return (
    <Card {...props} className={` ${classes.root} ${rootClassName}`} onClick={onClick}>
      {children}
        <div className={classes.box}>
          <ul>
          {props.pizzas?.toppings?.map((topping) => (
            <li key={topping.id} className={classes.list}>{topping.name}</li>
          ))}
          </ul>
        </div>
    </Card>
  );

CSS

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    textAlign: 'center',
    padding: theme.spacing(2, 2, 2),
    height: theme.typography.pxToRem(500),
    '&:hover': {
      cursor: 'pointer',
    },
  },
  box: {
    height: '300px',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  list: {
    flex: '0 0 70px',
  }
}));

The image below shows how my list currently looks. I would like the list items to wrap if there is space without overlapping each other, and stack together at the bottom if there are more toppings.

https://i.sstatic.net/uMSRN.png%5D

Thank you!

Answer №1

If you encounter a similar issue, here is how I managed to resolve it.

 section1: {
    sections: '1',
    size: '300px',
  },
  section2: {
    sections: '2',
    size: '500px',
  },
  section3: {
    sections: '5',
    size: '800px',
  },

I implemented sections

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Organized Styled-components

Considering implementing styled-components in my application and questioning the best organizational approach. Usually, styled-components are associated with a particular component for increased reusability. However, what is the recommended method for us ...

The content is not wrapped when transferred from App.js through props, although it is being wrapped in other scenarios

As I work on developing a basic invoice generator application, I encounter an issue with overflowing content in the "notes" section when passing data through props from the App.js file. Instead of wrapping the text, it overflows its container. import "./Ap ...

Tips for restructuring material-ui sample showcasing theme details

I came across this example code for creating a frame around an app: Material-UI Drawer When trying to split the elements into separate components, I encountered an issue. The code works fine when copied into a new create-react-app, but once I attempted t ...

Tips on transmitting data received on a post endpoint using io.emit in applications built with NodeJS and React

Embarking on my journey in the MERN realm, I find myself in need of assistance. My current project involves creating a compact dashboard application with charts using ReactJS. The challenge comes from having this app receive data from a Node.js server ever ...

Guide on capturing user permissions to determine the inactivity delay

Within this NextJS application, there is a file named permissions.tsx, structured as follows: // @ts-nocheck import { useState, useEffect } from 'react' import { useSession } from 'next-auth/client' function usePermissions() { const [p ...

Utilizing C# dynamic variable within inline CSS for an element (MVC)

I'm currently struggling with trying to generate a random color for an element in a cshtml view. No matter what I attempt, it just won't cooperate. When I include the @ symbol, the color property doesn't highlight as expected, leading me to ...

Is it possible to swap out a webpage link for a different one based on the size of the screen?

I designed a website for a friend: www.donjas-wellbeingforkids.co.uk I set up a Facebook Messenger Contact Us Link directly from the contact page here: donjaswell-beingforkids contact It's functional on desktop, where it seamlessly opens Facebook Me ...

Apply a grey backdrop for the central region

Trying to achieve the same look as this app with material ui: https://i.stack.imgur.com/Yarq5.png However, my current app appears like this: https://i.stack.imgur.com/ZLodg.png There are specific modifications I would like to make. Surround the Keyword ...

A React-based frontend solution designed exclusively for managing data structures and databases

Challenges with Product Management In my React App, the shop features products sourced solely from a JSON file as an external API, all managed on the frontend. Recently, I encountered a product with limited availability - only 20 pieces in stock. I am uns ...

Trapped in the clutches of the 'Access-Control-Allow-Origin' snag in our Node.js application

Our nodeJS application is deployed on AWS Lambda, and we are encountering an authentication issue with CORS policy when trying to make a request. The error in the console states: Access to XMLHttpRequest at 'https://vklut41ib9.execute-api.ap-south-1 ...

No matter how many PHP syntax combinations I tried, I still can't seem to update

Before jumping to conclusions about the duplicate question, I want to clarify that this is my last attempt. I've tried all possible syntaxes and there seems to be no error, yet I am unable to update the table. I can insert data into the table without ...

Adjusting Bootstrap 4 Modal Transparency

Currently using Bootstrap 4 Beta and looking to darken the background when a Modal is displayed. I stumbled upon a solution suggesting the addition of a CSS class. .modal-backdrop.in { opacity: 0.5 !important; position: fixed; } The advice was no ...

The value in Material-ui's FormControlLabel does not update to reflect changes in the state

Currently, I am in the process of developing a question and answer application. One of the key functionalities of this app is that when a user navigates back to a previous question, they should be able to view their previous answer. To achieve this, I have ...

The 'onRemove' property is not found within this type

I am looking to add a remove button for drag and drop items, but when I try to save the code, I get a compilation error. The error message reads: "Property 'onRemove' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttribute ...

Expanding and Shrinking Text Areas with Jquery

I am looking to create a textarea that comes preloaded with content. The height of the textarea should adjust to auto when there is content present, but switch to a height of 4.2rem when it is empty. Additionally, I want the textarea to dynamically increas ...

Tips for rearranging navigation item buttons with react.js and the MUI library

image description placeholder //I was working on adjusting the position of the navigation bar buttons to create space between them $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ //Here is the code snippet whe ...

The CSS rule for the Checkbox Input column is consistently implemented on the element located in the top row

Does anyone have experience working with a table containing checkboxes like the one demonstrated here? I am encountering an issue where toggling the checked property of any input on any row always affects the element in the first row. Upon further investi ...

Is it possible to generate React.js components using CDN links of our own creation?

My Next.js app features a Chatbot component that I want to make available for anyone to use on their own website by simply adding a script tag. If I place the component in my public folder for public access, how can I enable this functionality? I am looki ...

Is it possible to utilize a contenteditable div in place of a textarea?

Is it possible to replace a textarea with a content editable div? Will the behavior be the same? Can data processing be done in the same way as with textarea data? ...

Some characters are not compatible with the CSS writing-mode feature

There seems to be an issue with the CSS writing mode not applying correctly to the symbol '№'. Here is an example: <html> <head></head> <body> <p style="writing-mode: vertical-lr;"> Номер № ...