The height of Material-UI Grid item is surpassing the height of its container

I'm encountering an issue with a Grid container that contains 2 Grid items. The height of the second Grid item exceeds the height of the container, causing a scroll bar to appear.

Below is the code snippet for reference:

function App() {
  return (
    <Grid container style={{height: '100%'}}>
      <Grid item xs={12} style={{border: 'solid 1px'}}>
        Header
      </Grid>

      <Grid item xs={12} style={{height: '100%', border: 'solid 1px'}}>
        Content
      </Grid>
    </Grid>
  )
}

Visit this link for a live demo.

My question is, how can I ensure that the second Grid item fills the remaining height of its container without exceeding it? What am I missing in my code?

Any suggestions would be greatly appreciated. Thank you!

cssreactjsmaterial-ui

Answer №1

For a different layout, consider using direction="column",

<Grid
  container
  direction="column"
  style={{ border: "solid 5px", height: "100%" }}
>
  <Grid
    item
    style={{ border: "solid 1px", backgroundColor: "yellow" }}
  >
    Top Section
  </Grid>

  <Grid
    item
    xs
    style={{ border: "solid 1px", backgroundColor: "red" }}
  >
    Main Content
  </Grid>
</Grid>

Check out the updated Sandbox here

Hopefully this solution is helpful...

Answer №2

Take note that the parent container is overflowing due to the height of the first item. This occurs because 100% height was set for the second item, while there are actually 2 items within the parent container. To avoid having a scrollbar, the total height of the items should be equal or less. Try adjusting the height of the first item to 10% and the second item to 90%. This should make the scrollbar disappear.

Answer №3

Oh gosh, this is really frustrating.

I made some tweaks on the codesandbox to align it more with my perspective on this issue.

According to MDN / Web tech / CSS / max-height, when a percentage value is used, it's interpreted as the maximum height relative to the parent block's height.

I spent quite some time navigating through the dom tree using Chrome dev tools styles debugger, and you can clearly see how the elements sized with vh closer to the top are correct, but then the Mui Grid section has properties like max-height: 100%, height: 3319px

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

I am looking to enhance the appearance of a button without using a CSS file

I have a JavaScript file here and I am trying to style the PDF button. How can I achieve this? I want to change the location of the button without creating a separate CSS file because I only want to modify the button's style. import React from 'r ...

reactjs

The React implementation of an OpenLayers map is not responsive on mobile devices

I recently set up an OpenLayers map in a React project and it's working smoothly on desktop browsers. The map is interactive, allowing users to drag, zoom in/out, and display markers as expected. However, I'm facing an issue with touch events on ...

javascriptreactjsmobileopenlayers

The Asp.net MVC Navigation Bar

I'm facing an issue with the navbar in asp.net mvc https://i.sstatic.net/QJmPW.jpg Here is my code snippet <li class="nav-item nav-link" role="presentation"> <a class="nav-link" @Html.ActionLink("Cust ...

htmlcssasp.net-mvc

The communication between the Next.js and Node.js servers is being obstructed as the request body fails

Could you lend me a hand with this issue? Here is the function being called: function apiCreate(url, product) { console.log('Posting request API...' + JSON.stringify(product) ); fetch(url, { dataType: 'json', method: 'post ...

javascriptnode.jsreactjsapinext.js

What are the benefits of using material-ui@next without the need for

Thinking about creating a project using material-ui@next, but trying to avoid using withStyles. However, encountering issues with the draft of TypeScript that includes the decorator @withStyles. This leads to one question - is it possible to use material ...

reactjstypescriptmaterial-ui

Tips for simulating focus-visible on a Pressable in React Native Web/Expo

I'm experimenting with replicating the focus-visible behavior on a Pressable component in React Native Web manually. The goal is to have different styles applied when the component is clicked versus when it is focused using the keyboard tab. Fortunat ...

reactjsreact-nativeexpofocusreact-native-web

Utilizing React Ag Grid with custom Material design elements

Is it possible to apply material theme based classes to Ag Grid rows? Here is the scenario I am facing. Thank you in advance. Material Styles const customStyles = makeStyles((theme) => ({ actionIcon: { '& svg': { f ...

reactjsmaterial-uiag-grid

Is it possible for an HTML file to not recognize an external CSS stylesheet?

I've been trying everything, but I can't seem to get these two documents to work together. I'm confident that the CSS file is linked correctly with the right file name. I decided to give it a shot after watching this coding blog tutorial on ...

htmlcssyoutubeblogs

Adjust the spacing between the inputRoot and input in Material UI Autocomplete

Recently, in one of my projects, I've been utilizing Material-UI's Autocomplete component. Despite its lack of flexibility with resizing, I managed to tweak certain width, height, and font size attributes successfully. However, I'm currently ...

cssreactjsautocompletematerial-uimargin

Child element casting shadow over parent element

I am currently using box shadow for both the parent (.map) and child (.toggle-button): .map { position: fixed; top: 20px; right: 0; width: 280px; height: 280px; z-index: 9999; box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3); } .map ...

javascriptjqueryhtmlcss

Resolving the non-null assertion error in TypeScript and React: A step-by-step guide

My code snippet is as follows: type ItemProps = { status?: string; } <Items status={status!} /> // encountering an error with a warning about forbidden non-null assertion // @typescript-eslint/no-non- ...

reactjstypescript

Having trouble aligning text and images in React with Material-UI?

I am currently working on designing my portfolio website using reactJs and material-ui. I am facing an issue with aligning the image with text and also a problem with non-responsive text. Essentially, I am trying to achieve text on the left side and image ...

reactjsmaterial-ui

What is the best way to target outer elements only using CSS selectors?

Having trouble with a CSS selector: $("td.cv-table-panel-element") This selector returns a list of elements, shown in the screenshot linked below: https://i.stack.imgur.com/RoVMj.png Each element represents a column in a table with unique content. The ...

jqueryhtmlcssjquery-selectorscss-selectors

How can I maintain the router query when refreshing a page in Next.js?

I am facing an issue with a dynamic page and URL that is rendered on the client side. Below is the code snippet for the link that navigates to the second page: <Link href= {{ pathname: '/dashboard/[orderdetail]', query: { id: `${orderID}` } ...

reactjsnext.js

Background and checked styles for radio buttons

Thank you in advance for any assistance you can provide. I am looking to create a unique radio button design. When the radio button is not checked, I want it to display as a simple white circle. However, once it is checked, I would like it to appear eithe ...

cssreactjsmaterial-ui

Tips for applying CSS styles exclusively to the homepage

I am currently managing a SMF forum and I am facing an issue while trying to apply a background image exclusively to the homepage. Whenever I add a style to the .body class, it changes the background of not just the homepage but also other sections like ...

phphtmlcsssmf-forum

Delay Export of React Component Until After Request in Shopify App Development

Being a newbie in Shopify App Development, React, and Next.js, I may have a silly question. Currently, I am making a request to a website and using the response in the React component that I want to export/render. To avoid it being undefined, I need to wai ...

javascriptnode.jsreactjsnext.jsshopify

What is the best way to display lengthy content using a pair of HTML tags?

I am facing an issue with my Angular4 app where I have a <md-card-content> tag on part of my page. Inside this tag, I am trying to display some content within a <p> tag which has a maximum height of 20cm. While this setup works fine for short ...

htmlcssangularmd-card

Caution: The `punycode` module is no longer supported and is deprecated. It is recommended to use a different alternative from userland instead

I am encountering the following error. Can someone assist me in resolving it? I am looking to run this code without any errors. Starting project at /home/user/Desktop/react-native/aroa (node:31645) [DEP0040] DeprecationWarning: The `punycode` module is de ...

reactjsreact-nativeexpo

The sequence of elements within a React.addons.createFragment object

Currently, I am exploring the documentation on creating fragments in React from https://facebook.github.io/react/docs/create-fragment.html. It appears that the engineers at Facebook place a significant emphasis on the object memory layout, specifically the ...

javascriptfacebookreactjs