Div element failing to scroll with excessive content

I'm currently working on a modal using Mui Modal and I've encountered an issue.

Everything seems to be functioning correctly until I add more items to the cart. When the minHeight exceeds 500, it stops at 100vh and only displays 5 items, even if there are more than 5 in the cart.

I've tried setting overflow: auto, overflow: scroll, and overflowY: scroll on the parent div but none of these solutions have worked for me. Any suggestions?

<Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <div
          style={{
            minHeight: "500px",
            width: "500px",
            backgroundColor: "gray",
            gap: "10px",
            display: "flex",
            flexDirection: "column",
            overflowY: "scroll",
          }}
        >
          {cart.map((displate) => {
            return (
              <Card
                sx={{
                  height: "200px,
                  display: "flex",
                  padding: "10px",
                  gap: "10px",
                  backgroundColor: "black",
                  margin: "10px",
                }}
              >
                <div
                  style={{
                    backgroundImage: `url(${displate.img})`,
                    backgroundSize: "cover",
                    backgroundPosition: "center",
                    height: "150px",
                    width: "120px",
                  }}
                ></div>
                <div
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    color: "white",
                  }}
                >
                  <Typography>Name: {displate.name}</Typography>
                  <Typography>Size: {displate.size}</Typography>
                  <Typography>Finish: {displate.finish}</Typography>
                  <Typography>Frame: {displate.frame}</Typography>
                  <Typography>Quantity: {displate.quantity}</Typography>
                </div>
              </Card>
            );
          })}
        </div>
      </Modal>

Answer №1

The issue was caused by the absence of a minHeight property for each card within the map function, resulting in them adjusting their heights to fit the container.

By adding a maxHeight of 100vh to the parent container and setting a minHeight of 150px for each element, the problem was resolved successfully.

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

Struggling to combine select dropdown choices in one calculation

​​I'm currently working on a project where I need to create a website that multiplies three numbers selected from dropdown menus together. However, when I attempt to perform the calculation, I only get the result "1" displayed. I've spent sev ...

Displaying Image from Jquery Ajax Response

I have a PHP script that can resize images with specified dimensions by passing the width and height as variables like so: resize.php?width=100&height=200. The content-type of this PHP script is set to image/jpg. Additionally, I have an HTML page wher ...

Interactive YouTube video in a responsive classroom environment

Hello! I have a website at bit.ly/1EfgOsM and I am trying to align the video box with a YouTube video next to an image box. The width of the image box is set to 40%, so I want the video box to also be responsive with a width of 40%. The video box is in a s ...

Selecting default options in Material-UI Autocomplete component in real-time - a step-by-step guide!

Is there a way to automatically pre-select the default option in an Autocomplete component once the list of options has finished loading via an AJAX call? Imagine this scenario: when a user visits the page, a list of options is being fetched from the serve ...

What is the method for accessing font sizes through CSS code?

Why is the font size value in CSS returning incorrect values? Check out this jsFiddle example Here's the HTML code snippet: <div id="test">TEXT</div> <div id="test2">TEXT2</div> Now, take a look at the CSS: #test{ font ...

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

My JavaScript method works fine in Chrome, taking about 2000 ms to iterate over ~200 inputs, insert values, and trigger onchange events. However, it's a different story in IE where it takes about 10000 ms. To show the progress of this process, I deci ...

I'm puzzled as to why my Contact Form is failing to send out emails

Looking to create an email send function in a pop-up on my website that can be accessed via the following link: The issue I'm facing is that while it redirects perfectly to the thank you message, the PHP implementation does not seem to work after the ...

I encountered a problem with the label for the variant "outlined" in textfields while working with mui 5. Take a look at the image to better grasp the issue at hand

The image displays the issue I am encountering I have attempted to remove the theme codes within the theme provider but the problem persists. The component where I am utilizing it is outlined below: import { useState } from "react"; import { ...

Text not perfectly centered on the page

I'm working on a layout with 4 columns, and I want the first 3 columns to display text vertically. However, I'm having trouble aligning the text in the center of the column. Even after using justify-content and align-items properties, the text is ...

Error: Encountered a TypeError because it is trying to read properties of an undefined value in React, specifically the 'pathname'

https://i.sstatic.net/rDgxl.png It seems like the error is not related to BrowserRouter since it would affect all components. I have looked into the pathname but it is not being used in that specific component. Could someone please assist me? I ...

Turn off the feature of map scrolling on OpenStreetMaps

Is there a way to prevent mouse interactions and scrolling in an open maps iframe? I have already tried adding the attribute scrollwheel="false" to no avail. Are there any CSS methods to achieve this? <iframe id= "mapsource" scrollwheel="false" src="ht ...

Customizing the label styles within MUI's Chip component

Incorporating React with MUI's library has been a seamless experience for me. One of the key MUI components I have integrated is the Chip Within this particular Chip, there lies the label attribute, offering the option to showcase a text f ...

What could be causing a compile error in my React and TypeScript application?

I recently downloaded an app (which works in the sandbox) from this link: https://codesandbox.io/s/wbkd-react-flow-forked-78hxw4 However, when I try to run it locally using: npm install followed by: npm start I encounter the following error message: T ...

Using Meteor with React and createContainer

Utilizing react in combination with meteor, I have a main component named App which encompasses the page layout (Header, Sidebar, Right-sidebar). export default class App extends Component { render() { return ( <div> <nav clas ...

Error: Sorry, there was an issue with the code (React)

I'm attempting to build a React project without Node, and I'm trying to call a JS file from an HTML file. This is just a simple example for learning purposes. However, I keep encountering the Uncaught SyntaxError: Unexpected token '<&apos ...

Utilize the jQuery ajax post method within each loop to handle asynchronous requests, ensuring that the

I am currently working on a jQuery ajax function that is embedded within an each function as it needs to be executed for each post on the website. $('.post .button').each(function() { $(this).click(function() { $.ajax({ url: 'action ...

Choose an element by its specific data attribute

I have come across this html code and I am attempting to assign a new class to it using the data attribute: <p class="form-row form-row-wide" data-child-field="child_has_jacket"> </p> Even after trying with jQuery : jQuery( ...

Tips for resizing a 100% div without displaying vertical scrollbars in the browser

I am facing an issue with a table that has three rows. I have a main #container div with a height of 100%, and inside it is a table with 3 rows. The first and last row contain fixed size content. However, in the second row, there is a #content div with a h ...

Having trouble accessing the name property of a select dropdown in Material UI React

Currently, I am facing an issue with implementing a select dropdown. When handling the onChange method, I am encountering a situation where event.target.name is undefined. Specifically, when I choose the 1st option, I want to be able to access 'Englis ...

Display data from two arrays in real-time

The following data is available: "PensionPlanSummary": [ { "Type": "DefinedContributionPension", "Participants": [ { "Year": 2018, "Value": 425.0 } ...