0

I have a very specific layout on a react page here.

The canvas is sized dynamically based on the size of the flex item. When the other flex item is empty, everything is fine, the parent never increases above 100% height.

However, when I add content to the flex item on the right, the height of the parent, flex container, goes above 100%, and distorts all of the calculations that are done on resize.

How can I restrict the child flex item from increasing the height of the parent container?

Currently, on the site I linked, there is an empty item that represents the flex child that I'm referring to. If you resize the window, it will always fill the space properly, but when any content is added, it changes the height of the parent, destroying the proportions of the other child.

HTML

<Grid container 
                // spacing={3}
                direction="row"
                justify="center"
                className={classes.grid}
                // style={{ overflow: 'hidden' }}
            >
                <Grid ref={gridItemRef} item xs={12} sm={9} md={9}><canvas ref={ref} className={classes.canvas} id="canvas"></canvas></Grid>
                <Grid item xs={12} sm={3} md={3}><PlainText /></Grid>
                
            </Grid>

<Paper className={classes.plainText}>
            <div>{jsonSkills}</div>
            
        </Paper>

Styles

const useStyles = makeStyles({
    plainText: {
        borderRadius: 4,
        boxShadow: '0 3px 5px 2px rgba(0,0,0, .3)',
        background: '#232a2e',
        height: 'calc(100% - 6px)',
        padding: '4px',
        marginLeft: '1rem',
    }
})

const useStyles = makeStyles({
    grid: {
        width: '100% !important',
        height: '100% !important',
    },
    canvas: {
        borderRadius: 4,
        boxShadow: '0 3px 5px 2px rgba(0,0,0, .3)',
        background: '#232a2e',
        width: '100%',
        height: '100%',
        cursor: 'pointer',
        maxHeight: 'calc(100vh - 8rem)'
        
    }
});

I know there's 1000 variations of questions like this one, but I'm not sure what's going on in this case. Even when I hide overflow on the child in question, the parent container still grows in height.

---

I should add that what I'm trying to add in the problem flex child will be taller than the container. The idea is to keep the size of the flex child and make the content within scrollable.

sloont
  • 204
  • 2
  • 8
  • Related? - https://stackoverflow.com/questions/34194042/one-flex-grid-item-sets-the-size-limit-for-siblings – Paulie_D Jun 24 '21 at 16:55
  • @Paulie_D I don't think that will work because there the flex-direction is column. Flex-direction row is important for my implementation. – sloont Jun 24 '21 at 16:59
  • 1
    It works for rows also - basically the same situation here - https://stackoverflow.com/questions/48943233/how-can-you-set-the-height-of-an-outer-div-to-always-be-equal-to-a-particular-in/48943583#48943583 – Paulie_D Jun 24 '21 at 17:06
  • Hmm.. the height 0 minHeight 100% seems to be the solution. Here's an image of what it looks like after that https://imgur.com/mCpxLym – sloont Jun 24 '21 at 17:11
  • Then do you just add overflow hidden to the flex child and overflowY scroll the the child of the flex child? – sloont Jun 24 '21 at 17:12
  • It works perfectly with just overflowY: scroll on the flex Child. Thanks a million @Paulie_D – sloont Jun 24 '21 at 17:19

0 Answers0