How to fix unwanted behavior with CSS transition & flex wrap? - html

Question

I am building a React webpage.
I have a number Cards in a flex row, which expand when hovered over with the mouse. The way I am making them expand is by increasing max-width & by adding a transition clause regarding max-width in the CSS.
At certain screen sizes this works well, but at others the Card that is expanding will wrap around to the next row, which makes the mouse not hover it anymore, which in turn makes it contract & move back up to the initial row, restarting this process. It looks like the page went nuts.
What is a good approach to fixing this unwanted behaviour?
Card:
// this makes the cards expand/contract
const onHover = () => {
cardRef.current.style.maxWidth = '370px';
}
const onExitHover = () => {
cardRef.current.style.maxWidth = '250px';
}
CSS:
.parent {
padding: 20px;
margin: 10px;
border-radius: 20px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
.card {
max-width: 250px;
min-width: 250px;
transition: max-width 0.5s;
/* plus the following from react */
/* display:'flex', */
/* flexDirection:'row', */
/* width:'100%', */
/* position: 'relative' */
}
EDIT:
Adding more code for Context
HTML of Parent
<div className="App-content">
<p className="Section-header" style={{color:'red'}}> PROJECTS </p>
<div className="parent">
<NewCard title="Project 1" ...
/>
<NewCard title="Project 2" ...
/>
...
</div>
</div>
Css Of Parent
.App-content {
background-color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.parent {
/* background-color: #ffffff33; */
padding: 20px;
margin: 10px;
border-radius: 20px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
React Card Component:
import React, {useState, useRef, useEffect} from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardContent from '#material-ui/core/CardContent';
import Typography from '#material-ui/core/Typography';
import { DynamicTag } from './Tag';
import './NewCard.css';
const useStyles = makeStyles({
root: {
margin: 10,
},
title: {
marginBottom: 12,
}
});
export default function NewCard(props) {
const classes = useStyles();
const { title } = props;
const containerRef = useRef();
const onHover = () => {
containerRef.current.style.maxWidth = '370px';
}
const onExitHover = () => {
containerRef.current.style.maxWidth = '250px';
}
return (
<Card onMouseEnter={onHover} onMouseLeave={onExitHover} className={classes.root}>
<div ref={containerRef}
className=".card"
style={{
display:'flex',
flexDirection:'row',
width:'100%',
position: 'relative'}}>
<div style={{minWidth:'250px'}}>
<CardContent>
<Typography className={classes.title}>
{title}
</Typography>
// some content here
</CardContent>
</div>
<div className='Card-image-container'>
<img src={image} className='Card-image'/>
</div>
</div>
</Card>
);
}
Card CSS
.card {
max-width: 250px;
min-width: 250px;
transition: max-width 0.5s;
}