Flex布局中图片无法被目标div包含的问题求助

我尝试将图片放置在页面第一个class为icons的容器div内，但图片意外溢出到容器外。所有元素采用flexbox布局，在该div内放文本显示正常，放入图片就出现异常。我用红圈标注了对应的图片和div，不过因为代码片段不完整，无法完全复现问题。

CSS #

.landing {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
 
}
.introWrapper {
  width: 1000px;
}

.intro1 {
  font-size: 25px;
  text-align: center;
  font-family: 'Yapari';
  align-items: center;
  justify-content: center;
  margin-top: 23px;
}
.intro2 {
  font-size: 25px;
  text-align: center;
  font-family: 'Yapari';
  /* font-weight: 72; */
  margin-top: 50px;
}
#introCircle {
  border: 2px solid black;
  border-radius: 50%;
  width: 230px;
  height: 70px;
  margin: auto;
}
.icons {
  border: 2px solid black;
  height: 50px;
}
.icon1 {
  width: 30px;
}

HTML（React语法） #

<div id='landing' className={styles.landing}>
      <div className={styles.introWrapper}> 
        <div className={styles.icons}>
          <img src={icon1} className={styles.icon1}/>
        </div>
        <div id={styles.introCircle}>       
          <h1 className={styles.intro1}>HELLO I'M</h1> 
        </div>       
        <LastName />
          <h1 className={styles.intro2}>A FULL STACK DEVELOPER</h1>
      </div>
    </div>

原因分析 #

icons容器仅设置了固定高度50px，但未开启flex布局；图片作为替换元素，会保持自身宽高比，即便设置了width:30px，如果原始高度超过容器高度，就会溢出。而文本在块级容器中会自动适配，因此不会出现溢出问题。

解决方法 #

方法1：给容器开启flex布局，让图片自动适配并居中

修改icons的CSS：

.icons {
  border: 2px solid black;
  height: 50px;
  display: flex;
  align-items: center; /* 垂直居中图片 */
  overflow: hidden; /* 防止极端情况图片溢出 */
}

方法2：直接限制图片高度，使其不超过容器

修改icon1的CSS：

.icon1 {
  width: 30px;
  max-height: 100%; /* 图片高度不超过容器高度 */
  object-fit: contain; /* 保持图片比例，完整显示 */
}

方法3：结合两种方法，双重保障

同时设置容器的flex布局和图片的高度限制，既实现居中效果，又彻底避免溢出：

.icons {
  border: 2px solid black;
  height: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.icon1 {
  width: 30px;
  max-height: 100%;
  object-fit: contain;
}

内容的提问来源于stack exchange，提问作者manggae