body { background-color: rgb(28,38,60); font-family: 'Ubuntu', sans-serif;}* { box-sizing: border-box;}.team { display: inline-flex; padding: 10px; background: rgb(0 0 0 / 60%); border-radius: 20px; height: 130px; flex-direction: column; color: lightgray;}.team-info { display: inline-flex; height: 100%;}.team-compo { margin-right: 20px; padding-bottom: 10px; height: 100%;}.team-member { display: inline-block; font-size: 0; position: relative; margin: 0 5px; height: 100%;}.team-member > img { border-radius: 25px; height: 100%;}.team-member::after { content: ""; height: 100%; width: 100%; border: 1px solid rgb(211 211 211 / 30%); display: block; position: absolute; top: 8px; left: 8px; z-index: -1; border-radius: 25px;}<div class="team"><span class="rota-name">Some text</span><div class="team-info"><div class="team-compo"><div class="team-member"><img src="https://cdn-icons-png.flaticon.com/256/1626/1626319.png" alt=""></div> </div></div></div>Does anyone understand why the .team-info div exceeds the parent despite its height: 100% property.It's probably caused by the image, since removing it solves the problem, but I'd have to be able to keep it.
https://codepen.io/Akihiro-the-scripter/pen/yLryNOR
My goal is that whatever height is set in the .team div, the span should take the height it needs and .team-info the rest.
