2

I have a simplified version of an issue I am having. I have a container which I put items into. The container is set up as display: grid and I want it to always fill all available vertical space regardless of what is in it.

For illustration I have a simple CodeSandbox here. My question is :

  1. Why does the container (in grey) not fill all available space despite setting height: 100% ? (I also tried height: 100vh here but it ended up stretching the elements inside also)
  2. When I remove something from the container (i.e. Click "Remove Card" button), why does it shrink ?
import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/styles";
import React, { useState } from "react";
const useStyles = makeStyles({
  cardContainerRootStyle: {
    gridTemplateColumns: "repeat(auto-fit, minmax(348px, 1fr))",
    justifyItems: "center",
    display: "grid",
    gridGap: "1rem",
    margin: "0 auto",
    padding: 15,
    height: "100%"
  }
});

export default function App() {
  const styles = useStyles();
  const [cardCurrentlyDisplayed, setCardCurrentlyDisplayed] = useState([
    <Paper
      style={{ minHeight: "200px", minWidth: "200px", backgroundColor: "blue" }}
    />
  ]);

  return (
    <>
      <Button variant="outlined" onClick={() => setCardCurrentlyDisplayed([])}>
        Remove Card
      </Button>
      <Paper
        style={{ backgroundColor: "grey" }}
        square={true}
        classes={{
          root: styles.cardContainerRootStyle
        }}
      >
        {cardCurrentlyDisplayed}
      </Paper>
    </>
  );
}

Edit minimumHeightGrid

Updated 9th March 2020 - Solution - https://codesandbox.io/s/minimumheightgrid-nh2oq

Simon Long
  • 1,310
  • 4
  • 20
  • 39
  • My first question is "100% of what"? – Paulie_D Mar 06 '20 at 16:21
  • 1
    The 100% must refer upwards to the parent to determine that. If the superior height is not quantifiable, your property will fail. - https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window – Paulie_D Mar 06 '20 at 16:23
  • 100% of the parent div. So you mean the parent div needs to be 100% also ? – Simon Long Mar 06 '20 at 16:24
  • 1
    Yep, you need to make sure that the 100% can be quantified. If the container is the ultimate parent then the `html` and `body` need to have 100% height/min-height also. – Paulie_D Mar 06 '20 at 16:25
  • Have forked my pen and ensure that the parent(with red border) is larger than my container. Still the same issue - https://codesandbox.io/s/minimumheightgrid-rjvzg – Simon Long Mar 06 '20 at 16:35
  • ...and the `#root` div...and the `html/body` elements all have 100%...right? – Paulie_D Mar 06 '20 at 16:37
  • Not explicitly no. I thought it should at least just fill up its parent seeing as the space is there. – Simon Long Mar 06 '20 at 16:39
  • Got a solution. See answer below -https://codesandbox.io/s/minimumheightgrid-nh2oq – Simon Long Mar 06 '20 at 17:42

2 Answers2

0

If you want to ensure that the blue square fill all the space when it is render alone in the grid. You just need to give your blue squace a width of 100% and let the grid css take care of the rest.

Here the link of the forked sandbox https://codesandbox.io/s/minimumheightgrid-i494m

NB: if i misunderstood your problem don't hesitate to tell me.

Aymeric Henry
  • 51
  • 3
  • I want the grey container (which contains the blue square) to always fill all available vertical space on the page (regardless of what is in it) – Simon Long Mar 06 '20 at 17:06
  • It already take all the space available by his parent container, if you want the grey part to take more space you need to give a bigger height for his parent container. What size the grey part should have all the screen or another set height ? – Aymeric Henry Mar 06 '20 at 17:14
  • I have given a bigger height for the parent container in my forked CodeSandbox here - http://codesandbox.io/s/minimumheightgrid-rjvzg. Still the same issue. – Simon Long Mar 06 '20 at 17:15
  • Yes sorry, i forgot i had the grid-template-rows css property in my codesandbox. is it what you were looking for ? https://codesandbox.io/s/minimumheightgrid-3irxw – Aymeric Henry Mar 06 '20 at 17:20
  • No unfortunately not. I had something similar myself. I want the blue box to remain the same constant size (i.e. 200px * 200px) and only it's container (grey box) to fill available space. – Simon Long Mar 06 '20 at 17:23
  • Here i updated the sandbox a little max-height and max-width did the trick – Aymeric Henry Mar 06 '20 at 17:26
  • I got a solution. See my answer. https://codesandbox.io/s/minimumheightgrid-nh2oq – Simon Long Mar 06 '20 at 17:42
0

Finally got a solution - https://codesandbox.io/s/minimumheightgrid-nh2oq

Change the following on the container (grey)

    minHeight: "100vh",
    height: "auto"

and on the element (blue) 

maxHeight: "200px"
Simon Long
  • 1,310
  • 4
  • 20
  • 39