I'm having trouble with sizing a child div inside a parent div. The problem is that the child div's size changes according to the number of elements it contains, but I want all the child divs to be the same size regardless. This issue arises within the .container element. When my array returns 6 items, everything works fine. However, if the array has less than 6 items, each {styles.object} gets resized based on the available space in the container. Typically, when fewer than 6 items are returned, each item becomes larger and takes up more space. But I need all the objects to be the same size even if there are less than 6 items.
var textContainer = <div className={styles.text_container}>
<div className = {styles.text}>Experts</div>
<span className={styles.view}onClick={() => handleNextClick()} >View More</span>
</div>
var displayData = <div className = {styles.container}>
{array.slice(0,6).map((item,i)=>{
return (
<>
<div className ={styles.object} key={i}>
<img className ={styles.img} src={item.image}></img>
<div className={styles.name}>{item.name}</div>
</div>
</>
)
})}
</div>
return (
<>
{textContainer}
{displayData}
</>
.text_container{
display: flex;
margin: 50px;
margin-left: 150px;
margin-bottom: 10px;
width: 80vw;
height: 3vh;
padding: 0;
align-items: center;
}
.text {
display: inline;
font-size: 20px;
font: url('../../public/fonts/Lato-Bold.ttf');
letter-spacing: 0.24px;
flex: 1;
}
.view{
display: flex;
font-size: 14px;
font: url('../../public/fonts/Lato-Bold.ttf');
cursor: pointer;
}
.container{
display: flex;
margin: 50px;
margin-left: 150px;
padding: 0;
width: 80vw;
height: 28vh;
justify-content: flex-start;
}
.object{
display: flex;
margin-right: 30px;
width: 22vw;
height: 25vh;
position: relative;
}
.name{
margin-top: 0;
font-size: 14px;
width: 100%;
position: absolute;
top: 102%;
text-align: center;
}
.img{
width: 100%;
height: 100%;
border-radius: 50%;
cursor: pointer;
}