L'image/le contenu n'est pas contenu dans un div

Question

J'essaie d'inclure une image dans le premier div de la page, mais pour une raison quelconque, elle se trouve en dehors de la page. Toutes les ressources sont situées dans des flexbox. Lorsque je mets du texte dans ce div au lieu d'une image, cela fonctionne parfaitement.

J’ai encerclé l’image et le div dont je parle en rouge. Cet extrait de code ne vous montrera pas de quoi je parle car il ne s'agit pas du code complet.

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

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

Answer 1

D'après ce que j'ai compris, vous avez déjà fourni une hauteur à "l'icône" du div. va height 更改为 min-height

.icons {
  border: 2px solid black;
  min-height: 50px;
}