Soy nuevo con flexbox y tengo un problema.

No entiendo por qué mi div es tan largo en altura. Intenté poner un valor de altura pero no cambia nada.

Lo extraño es que el contenido de este div tiene el tamaño correcto.

Este es mi código:

 <div className="competences-content"> <div className="competences-text-content"> <h1 className="competences-title">Langage de création</h1> <p className="competences-text">blablabla</p> </div> <input className="competences-image" type="image" src="/assets/img/competences.png" /> </div>

Mi CSS:

 .competences-content{ display:flex; flex-flow: row; position: relative; top: 45px; width: 100%; margin-left: 5%; } .competences-text-content{ flex-direction: column; margin-right: 15px; width: 50%; } .competences-title{ font-family: Poppins-bold; color: #200A40; font-size: 44px; letter-spacing: 1px; } .competences-text{ overflow-y: auto; max-height: 50%; font-family: Poppins-regular; font-size: 10px; line-height: 16px; } .competences-image{ height: 375px; }

Traté de eliminar uno por uno mi valor de CSS, desafortunadamente no encontré la causa del problema. Usted me podría ayudar por favor ?

Atentamente