Issue with React Material UI: Box is not scrollable vertically

I've been grappling with this issue for hours and could really use some assistance. My goal is to create a Chat component that allows vertical scrolling, but I've hit a roadblock. Here's a simplified version of the problem on Codesandbox: https://codesandbox.io/s/reverent-panini-lsbfg?file=/src/chat/ChatHistory.tsx

Despite setting a fixed height (600px) for the container and applying styles such as overflow: "hidden" and overflowY: "scroll", the vertical scrolling still isn't functioning as expected. Any insights would be greatly appreciated. Thanks in advance.

cssreactjsmaterial-ui

Answer №1

Well, forget about CSS. Turns out, it's a CSS issue.

Using justify-content: flex-end to create a vertical scrollbar

All I had to do was simply remove 

justifyContent: "flex-end"
.

Specifically for MUI version 5


    <Box
      sx={{
          mb: 2,
          display: "flex",
          flexDirection: "column",
          height: 700,
          overflow: "hidden",
          overflowY: "scroll",
         // justifyContent="flex-end" # DO NOT USE THIS WITH 'scroll'
        }}
    >

And for MUI version 4

<Box
      mb={2}
      display="flex"
      flexDirection="column"
      // justifyContent="flex-end" # DO NOT USE THIS WITH 'scroll'
      height="700px" // set the height fixedly
      style={{
        border: "2px solid black",
        overflow: "hidden",
        overflowY: "scroll" // included scroll functionality
      }}
    >

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

Ensure the locale format is updated whenever a locale switch occurs

I've integrated momentjs into my React project. I have set up the locale configuration through the React Context API, but I discovered that changing the global locale of momentjs does not impact existing objects. This behavior has been a feature since ...

reactjsmomentjslocale

Customize your CSS line height for the bottom of text only

Hey there, I'm pretty new to frontend development so please excuse me if this is a silly question :) I know that it's not usually done, but when you apply line-height to an element like an h1, it adds extra space both on the top and bottom of th ...

htmlcss

Redefining the colors of an SVG when it is a CSS background image in code

I currently have an SVG icon encoded within my CSS file. I'm looking to change the color of this icon when a user hovers over it without creating a duplicate icon in a different color. Here's a snippet from my CSS file: background-image: url("d ...

htmlcsssvgbackground-image

Utilize flexbox to make two elements on the same line

Is it feasible to have two elements on the same line when aligning a series of elements with flexbox? Consider this scenario: .outer { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; width: 50px; } .outer .inner ...

cssflexbox

What is the best way to ensure that a Material-UI Select remains open after clicking on a single item within it?

I've developed a customized Material-UI dropdown with an optional search/filter text field at the top to help users navigate through numerous entries. However, I'm facing an issue with keeping the dropdown open when clicking on the search field ( ...

reactjsmaterial-ui

An error message pops up when using Next.js with Sass, indicating that a suitable loader is required to handle this file type

I've been struggling to properly wire up my next.js project with SCSS, but no matter what I try, it just won't work. I double-checked my setup for compiling SCSS files, but the error message keeps popping up: /scss/style.scss 1:0 Module parse f ...

javascriptcsssassnext.js

Preventing absolute div from spilling out of its parent container

Within a parent container, I have a lengthy div. I believe that it needs to be positioned absolutely in order to allow horizontal scrolling. My goal is to only display the portion inside the parent div. I attempted setting overflow: hidden on the parent ...

csshtmllayout

What are the steps to implement server side routing using react-router 2 and expressjs?

If you're looking to delve into server side rendering with react-router, the documentation linked here might fall short in providing a comprehensive understanding. In particular, it may not offer enough insights on how to leverage react-router 2 for r ...

javascriptexpressreactjsreact-routerreact-router-component

The ternary operator is malfunctioning when it comes to the condition

I've encountered an issue while trying to integrate a custom MUI button into my project. My goal is to have the button enabled only when 2 specific objects are not empty, otherwise it should remain disabled. Despite my efforts, the code I've writ ...

javascriptreactjsmaterial-ui

Navigate through AJAX Live search using arrow keys and mouse controls

I have encountered an issue with the autocomplete feature on my webpage. Although I am able to input suggestions, I am unable to navigate through them using the mouse pointer initially. Oddly enough, if I press the up/down keys once after the list items ar ...

phpjqueryhtmlcssajax

Retrieving information in NextJS using getServerSideProps yields a Promise with a status of {<pending>}

I'm facing an issue while trying to retrieve data in NextJS using getServerSideProps within my component. All it returns is Promise {}. I'm unsure about what mistake I might be making. Here's the snippet of my code: const MyHomeComponent = ( ...

reactjsnext.js

Alter the arrow to dynamically point towards the location of the click source

I am currently working on creating a popover dialog that should point to the element triggering its appearance. The goal is for the arrow to align with the middle of the button when clicked. While I am familiar with using CSS to create pointing arrows, th ...

javascriptjqueryhtmlcss

What is the best way to customize the endIcon of a styled-component button?

Presented here is a neatly styled button I've created import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; const MyB ...

cssreactjsmaterial-uistyled-components

What is the best approach for customizing nested component styles within a Material-UI theme?

I have designed a mui DataGrid with editable cells. While in edit mode, the input's default padding is set to 0 16px, as shown by the generated style code from mui: .css-jqsvr8-MuiInputBase-root-MuiDataGrid-editInputCell input { padding: 0 16px; h ...

reactjsmaterial-uistyles

Several DIVs with the same class can have varying CSS values

I am looking to modify the left-margin value of various separate DIVs using JavaScript. The challenge is: I only want to use a single className, and I want the margin to increase by 100px for each instance of the class. This way, instead of all the DIVs ...

javascripthtmlcssgetelementsbyclassnamemargin-left

Issues with content overlapping within Bootstrap can arise when elements are

Struggling with my band website development using Bootstrap. Inexperienced in web design, I'm facing difficulties getting elements to align properly without slipping under each other. Looking for insights and suggestions on how to avoid manual CSS adj ...

jqueryhtmlcsstwitter-bootstrapfrontend

Updating nested data in Prisma - a comprehensive guide

Let's take a quick look at the technologies in use before we dive deeper: Next.Js(app router) version 14.2.2 React version 18 prisma version 5.12.1 database -> mongodb Prisma is a new tool for me and I'm encountering issues while trying to u ...

reactjsmongodbnext.jsprisma

What is the best way to implement the concept of setting a minimum size for a scrollable element based on its content and a

In the interest of simplicity, let's assume that my fixed height is 100px. So, the CSS expression for the question in the title would be: height: min(min-content, 100px); This means to take the minimum value between content height and 100px. Unfortun ...

htmlcsssizing

Where did the match parameter go in the props?

I'm in the process of developing my first react application and I am looking to implement a Switch element to display components based on different routes. One of the routes includes a parameter. However, I have encountered an issue where the match at ...

reactjs

Showing a hidden div after an unsuccessful AJAX call

Encountering an issue with displaying a div notification using the code snippet below: $.ajax({ url: url, cache: false, async: false, success: function (data) { response = jQuery.parseJSON(data); }, error: functi ...

jqueryhtmlcssajax