Html 使用Flexbox显示的相对单位中的最大宽度进行查询

我正在尝试使用DisplayFlex在一行中显示团队成员的4张照片和传记，以适合包装容器。当我将每个img的最大宽度设置为360px时，它可以工作，但当我将最大宽度设置为%相对单位时，它不工作。有人知道为什么吗？我想在我所有的项目中使用相对单位，但我无法理解这一点

<div id="people">

                    <div class="john person">
                        <img src="images/john%20doe.jpg" alt="CEO">
                        <h3>John Doe</h3>
                        <h4>CEO & Founder</h4>
                        <button>Contact</button>
                    </div>

                    <div class="jane person">
                        <img src="images/jane%20doe.jpg" alt="architect">
                        <h3>Jane Doe</h3>
                        <h4>Architect</h4>
                        <button>Contact</button>
                    </div>

                    <div class="mike person">
                        <img src="images/mike%20ross.jpg" alt="architect">
                        <h3>Mike Ross</h3>
                        <h4>Architect</h4>
                        <button>Contact</button>
                    </div>

                    <div class="dan person">
                        <img src="images/dan%20star.jpg" alt="architect">
                        <h3>Dan Star</h3>
                        <h4>Architect</h4>
                        <button>Contact</button>
                    </div>            

                </div>


    #people{
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-basis:100%;
    }

   #people div img {
        max-width: 360px;
    }

无名氏
首席执行官兼创始人
接触
无名氏
建筑师
接触
迈克·罗斯
建筑师
接触
丹星
建筑师
接触
#人{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
弹性基准：100%；
}
#人事部{
最大宽度：360px；
}

---

以上代码实现了上述结果。但如果我想将#people div img{}中的最大宽度更改为相对%单位，有人知道我是如何做到的吗。我正在使用一个在线模板，并试图自己重建它（因此我在问，如果我必须自己为一个真实的项目创建这样的东西，我不会理解这个问题）。谢谢

我想你指的是这个。您需要添加

flex:1的属性

到

#people

子类，即

.person

，从而使其具有灵活性（flex-grow:1，flex-shorn:1，flex-basis:auto）。然后将图像宽度设置为

100%

，这将相对于视口宽度调整大小

#人{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.人{
弹性：1；
}
.个人img{
最大宽度：100%；
}

无名氏
首席执行官兼创始人
接触
无名氏
建筑师
接触
迈克·罗斯
建筑师
接触
丹星
建筑师
接触

提供重现问题的工作代码段。@user832222否，问题伙伴。如果答案是正确的，就把它标出来。干杯