Scrollable Flexbox Container

In my flex container, I am attempting to create another flex container that will scroll content if it exceeds the screen size. Here is the code I have so far:

<Box
    sx={{
        m: 'var(--Content-margin)',
        p: 'var(--Content-padding)',
        width: 'var(--Content-width)',
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'green',
    }}
>
    <Box sx={{ flex: 1, overflow: 'scroll', backgroundColor: 'orange' }}>
        ... // long list of content
    </Box>
</Box>

I have experimented with different options, but I have been unable to prevent the default browser scrolling behavior. The content continues to grow downward instead of being contained within the orange box.

Currently, the layout looks like this. The scrolling appears at the browser level rather than within the orange box:

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

htmlcssreactjsmaterial-ui

Answer №1

To ensure the orange box fits the screen size and allows overflow, you must specify a height for it. This will prevent the box from becoming larger than the screen.

<Box
   sx={{ flex: 1, overflow: 'scroll', backgroundColor: 'orange', height: 'desired height' }}
>
   // lengthy content list
</Box>

Answer №2

One solution I find effective for resolving this issue involves utilizing flexbox and setting the height of the main container to 100%. By doing so, the container will adjust its height to occupy 100% of the screen, excluding the height of the navigation bar. For a visual example, you can refer to this demonstration https://example.com/unique-link

html, body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

main {
  height: 100%;
  overflow: auto;
}

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

Animating a div in CSS3 to expand horizontally from left to right without affecting its original position

I am currently in the process of developing a calendar using HTML, CSS, and JavaScript. The main purpose of this calendar is to showcase upcoming and past events. However, I am facing difficulties in ensuring that my event blocks occupy the remaining space ...

javascripthtmlcss

The parameter cannot be assigned to type 'HTMLCanvasElement | null' due to conflicting arguments

I am encountering an issue with the following code, as it fails to compile: import React, {useEffect} from 'react' import {Card, Image} from 'semantic-ui-react' import * as chart from 'chart.js' export const PieChartCard = ...

reactjstypescriptreact-typescript

Is there a way to eliminate the bold line at the bottom of the header row in the table?

Following the provided example, I have successfully created a table using the bootstrap Table element. You can view my StackBlitz here. I noticed there is a thick black line appearing at the bottom of the table header. This discrepancy was not present in ...

reactjshtml-tablereact-bootstrapbootstrap-5

Switching up the image using a dropdown selection menu

I am struggling with updating an image based on the selection made in a dropdown menu. I am quite new to javascript, so I believe there might be a simple issue that I am overlooking. Here is my attempt at doing this: JS: <script type="text/javascript" ...

javascripthtml

My Flask App encounters API request failures during npm run build

I developed a web application using Flask and React. The issue I am facing is related to frequent API calls made to the backend using axios. Despite testing successfully on localhost, when I run 'npm run build' and 'serve -s build' in ...

reactjs

Unable to access Bootstrap nav link

There seems to be an issue with a link inside the Bootstrap nav-menu. The link is not opening when clicked on. https://i.sstatic.net/lrXmD.jpg I am facing trouble with the Cart file as it does not open when I click on the Cart hyperlink. I have double-ch ...

htmlcsstwitter-bootstrap

Creating a Form Layout with Bootstrap - Organizing Text Boxes and Text Areas

https://i.sstatic.net/oqRwR.jpg In the image above, I need to adjust the position of the textbox to align it with the TextArea. Is there a Bootstrap class that can help me achieve this? My current version of Bootstrap is 3.3.6. HTML &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

Explore the Shopify assistance on the secondary blog section within a separate page

Hey there, I'm looking for someone who is familiar with Shopify and can assist me. I am currently trying to set up a secondary Blog section on a separate page from my default 'Blog Page', but I'm encountering issues in displaying the a ...

htmlcssshopify

Modifying table background color using AJAX and jQuery?

Scenario: My web page is designed to automatically search for a specific cell input by the user. If the cell has been input with a value, the table's background color will turn red; otherwise, it will remain green. Currently, the table has not been p ...

phpjavascriptjqueryhtmlajax

Error: The property 'pathname' cannot be read, as it is null

UPDATE: Removing this section from _document did solve the issue, but why? <Link href={`/search`} prefetch={false}> <a className="d-inline-block text-center" style={{ textDecoration ...

reactjsnext.js

Trying out a React component that relies on parameters for connection

Having an issue while attempting to test a connected react component that requires a props.params.id in order to call action creators. During the testing process, when checking if the component is connected to the store, an error "Uncaught TypeError: Canno ...

javascriptreactjsmocha.jsreduxkarma-mocha

Adjust the width of content within a wrapper using HTML and CSS to automatically resize

I am facing an issue with a content div that has variable length content arranged horizontally. I want the width of this content div to adjust automatically based on the length of its content. Removing the arbitrary "20%" value from the width property is c ...

htmlcss

Eliminate the CSS triggered by a mouse click

Having some difficulty toggling the switch to change the background color. Struggling with removing the applied CSS and getting it to toggle between two different colored backgrounds. Code Sample: <!Doctype html> <html lang="en"> <head> ...

javascriptjqueryhtmlcss

Extracting the value of an HTML element from a string variable in AngularJS

I am facing an issue with my application where the content of an HTML element is received as a template from the server. I am attempting to assign this template, which is essentially a string, and have the variables within the template linked to the contro ...

javascripthtmlangularjs

When trying to reference "this" and store it in a variable, it appears as undefined. However, DevTools show that it is actually defined

I've encountered an unusual situation in my React app involving the binding of "this" - I have a function within a component named "App" that is located in a separate file. In the main file, I've bound the "this" command to it. What's puzzl ...

javascriptreactjsthisjsx

Inquiring about browserify or webpack on a website using node - a few queries to consider

Seeking assistance with a website project I am currently working on. The project consists of 7 HTML documents, 3 stylesheets, 8 JavaScript files (including jQuery.min.js and some additional jQuery plugins), and various images. I am looking to bundle and mi ...

javascripthtmlcssnode.jsweb

What could be causing my AngularJS to malfunction on this particular website?

I am currently learning AngularJs and practicing some coding. However, I am facing an issue where the javascript code does not work when I run it on my browser (Chrome/IE). The "{{product.like}}" code is not functioning as expected. Is there any specific d ...

javascripthtmlcssangularjs

An error has occured with Redux showing "Cannot read properties of undefined (reading 'items')" for the export constant selectItems, which is defined as (state) => state.basket.items

I am encountering an issue with implementing the add to basket functionality in my e-commerce website built with Next.js using Redux. The error message "Cannot read properties of undefined (reading 'items'): export const selectItems = (state) =&g ...

reactjsreduxnext.js

The website is unable to detect the newly created .scss file

I am new to scss and currently using a Portfolio Template for my website. Recently, I added an extra section to the website. I noticed that when I define a style in an existing _file.scss file, it works perfectly fine. However, when I create a new _filenam ...

htmlcssnpmsass

Challenges with implementing speech recognition within a React component's state

I've encountered an issue with the React library react-speech-recognition. When trying to modify the newContent state within useEffect, it ends up printing as undefined. Additionally, I'm facing a similar problem when attempting to update the sta ...

javascriptreactjsreact-hooksspeech-recognition