Struggling to achieve a horizontal scroll using 'overflowX' in MUI, but unfortunately, it's not functioning as expected

Is there a way to create a properly-sized card with a horizontal scrollbar in a paper format? I've tried using 'overflow' but it doesn't seem to be working in this scenario.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

import Cards from './Cards';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    color: theme.palette.text.secondary,
    maxWidth: '100%',
    overflowX: 'auto',
    display: "flex",
    flexDirection: "row",
    justifyContent: "center"
  },
}));

const Dashboard = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <Cards />
            <Cards />
            <Cards />
            <Cards />
            <Cards />
            <Cards />
            <Cards />
            <Cards />
            <Cards />

          </Paper>
        </Grid>
      </Grid>
    </div>
  );
};

export default Dashboard;

The current setup is squeezing the cards into a width of 100%. How can I make them scrollable?

https://i.sstatic.net/L0So9.png

cssreactjsmaterial-ui

Answer №1

Your card's default value is set to flex-shrink: 1 (Need extra space? shrink)

flex-shrink: When all flex items exceed the size of the container, they shrink proportionally based on flex-shrink. Learn more

Additionally, by default flex-basis is auto + 

flex-wrap: nowrap; /* Default value */
, aligning items in a single line.

Result:

  • 2 cards => 2 columns.
  • 9 cards => 9 "Squeeze" columns (similar to your problematic screenshot).

"Squeeze" = No overflow content = No scrollbar.

Shrink Example:

.flex_grid{
  display: flex;
  overflow-x: scroll;
}

.card{
  border: 1px solid gray;
  height: 100px;
}
<section class="flex_grid">
  <div class="card"><h1>1</h1>
    <p>Lorem Ipsum is simply dummy text...</p>
  </div>
  ...
  <div class="card"><h1>6</h1>
    <p>Lorem Ipsum is simply dummy text...</p>
  </div>
</section>

One solution

  1. Add flex-basis (Responsive => use %). For example: flex-basis: 40%; (Or use auto - related to the content inside the card).
  2. Disable shrink using flex-shrink: 0;

Working example:

.flex_grid {
  display: flex;
  overflow-x: scroll;
}

.card {
  border: 1px solid gray;
  flex-basis: 40%;
  height: 100px;
  flex-shrink: 0;
}
<section class="flex_grid">
  <div class="card"><h1>1</h1>
    <p>Lorem Ipsum is simply dummy text...</p>
  </div>
  ...
  <div class="card"><h1>3</h1>
    <p>Lorem Ipsum is simply dummy text...</p>
  </div>
</section>

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

Utilizing Angular's ng-repeat with varying directives for each iteration

I am trying to utilize ng-repeat within Angular to iterate through multiple <li> elements with a directive embedded. My goal is to have the first two items in the ng-repeat display differently in terms of styling and content compared to the remaining ...

javascripthtmlcssangularjs

Conflicting events arising between the onMouseUp and onClick functions

I have a scrollbar on my page that I want to scroll by 40px when a button is clicked. Additionally, I want the scrolling to be continuous while holding down the same button. To achieve this functionality, I implemented an onClick event for a single 40px s ...

javascripthtmlreactjstypescriptresponsive-design

Utilizing React JS to call a static function within another static function when an HTML button is clicked

Can you please analyze the following code snippet: var ResultComponent = React.createClass({ getInitialState: function () { // … Some initial state setup ……. }, handleClick: function(event) { // … Handling click event logic …… // Including ...

javascriptreactjs

Aligning items in the header bar with floating <li> elements

I'm struggling with centering an element in the header bar of my website. I currently have a single header bar at the top, and inside the <header> tag, there's an unordered list with some items floating left and one floating right. Now, I w ...

htmlcsshtml-lists

Discover the method to adjust the position of elements, such as images, using radio buttons

I have an image positioned in a container along with 3 radio buttons. I want to make additional images appear over the main image when specific radio buttons are selected. Each button will trigger different positions for the additional images. So far, thi ...

javascriptjqueryhtmlcss

Typography alignment in Mui determined by breakpoints

I'm curious if there is a method I could utilize to adjust my Typography alignment property depending on the preset breakpoints? For instance: <Typography align={{ xs: 'left', sm: 'left', md: 'left', lg: 'right& ...

reactjsmaterial-ui

Align text to the right and do not include any images

I am attempting to align the images back to the left under the title, while only floating the description text to the right. I am struggling with clearing the image floats. HTML: <div class="title">System Displays</div> <div class="descrip ...

htmlcsscss-float

Jesting around with mocking console.error leads to test failures

The Issue: Currently, I am working on testing React components using Jest and Enzyme. In order to check for properties in development, I have incorporated the prop-types module. The prop-types module relies on console.error to alert when mandatory props a ...

javascriptreactjsjestjsenzyme

The use of callbacks is ineffective in addressing the asynchronous nature of

Hello everyone, I'm currently working on a weather app and I'm facing an issue with the asynchronous behavior of useState. I've come across some suggestions on Stack Overflow that using a callback in the useState function might solve the pro ...

javascriptreactjsreact-hooks

How can I manage the horizontal scrolling in a large, expansive HTML Bootstrap table?

Currently, I am working on a Laravel project and have encountered an issue with a table that is overflowing from the right side. Despite trying various methods for implementing horizontal scroll, none of them seem to be effective in resolving the problem. ...

csslaravelbootstrap-5

Iframe overlay feature functioning on Chrome but not on IE11

I have a Document viewer with a .less file containing the following styling: div.document-previewer-container { //height: 400px; //width: 300px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; //padding: 5px 2px; > div.document-preview { h ...

javascripthtmlcssangularjs

Caution: The attribute name `data-*` is not recognized as valid

I am attempting to import an SVG file in my NEXT.js project using the babel-plugin-inline-react-svg. I have followed all the instructions and everything is functioning perfectly. // .babelrc { "presets": ["next/babel"], "plugin ...

reactjstypescriptsvgnext.jsreact-typescript

An unusual icon with three varying sizes in a single file

I have come across an interesting favicon file. Click here to download the favicon file Unfortunately, I am unable to upload this image file as it does not meet the required format standards. Upon viewing the file in Windows 7, a fascinating discovery w ...

htmlcssimagefavicon

Troubleshooting a query problem within a forum built with ReactJS, MySQL, Node.js, and Express

As a junior developer, I am currently working on creating a basic forum using ReactJS, Node.js, Express, and MySQL. In the forum, it is essential for each Topic to have multiple Posts associated with it. I am encountering an issue where the posts are not ...

mysqlnode.jsreactjsexpress

MERN: Sharing _id across different components

I am facing some challenges as I navigate through the world of React and JavaScript. Currently, I have a MERN stack set up with a basic read and write API. My goal is to link to a new component using the Mongo id and retrieve all the data associated with ...

reactjsmern

Utilizing React-virtualized: maximizing minWidth exclusively

Can anyone help me figure out how to make the last column width equal to all available space in a block? I've tried setting minWidth, but it's not quite working... Whenever I set a large width for the last column, my other columns on smaller scr ...

reactjsreact-virtualized

Eliminating unnecessary whitespace between the bottom of the document and an element

I have a HTML page that when scrolled should limit scroll to the document height. It must not exceed the bottom of an element. Here is a screenshot for better understanding: https://i.stack.imgur.com/RaVg8.jpg The scrolling should be limited after the En ...

javascriptjqueryhtmlcss

Adjusting font sizes for both multiline text within a <p> element and labels based on the number of lines

Whenever I have multiline paragraphs or labels, the font size seems to adjust depending on the number of lines. All I want is to keep the font size consistent regardless of the lines. The labels all have the same CSS styling and inheritance. Here is a vis ...

htmlcssasp.net

When using React, it's important to verify if the page has been refreshed before updating the local storage based on the GraphQL query. If the page

Currently, I am working on implementing a hit counter feature that increments each time a user clicks a button. The setup involves GatsbyJS with React and utilizes a lambda function to store the count in FaunaDB. Additionally, the client-side functionality ...

javascriptreactjsgraphqllocal-storagefaunadb

Transform Vue.js into static HTML output

Is there a way to convert a Vue.js component into static html without the need for javascript? I am specifically interested in retaining styles. I am searching for a library where I can execute code similar to this: SomeNestedComponent.vue <template> ...

javascripthtmlcssvue.jsnuxt.js