在父级中调整子 div 的大小

Question

我需要一些帮助来确定父级中的子 div 的大小。 我面临的问题是我的子 div 将根据 div 中元素的数量调整大小，但我希望每个 div 的大小相同。 这是与 .container。 如果我的数组返回所有 6 个项目，则没有问题。 但是，如果我的数组返回少于 6 个项目，则每个 {styles.object} 将根据容器的空间大小调整大小。 通常，如果退回的商品少于 6 件，则每件商品都会更大并占用更多空间。 但是，即使返回的项目少于 6 个，我也希望我的对象大小相同。

    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;
}

Answer 1

尝试在子元素上设置最小宽度和最大宽度