Keep aspect ratio inside a flex parent - html

Question

I know there's a lot of topics talking about aspect ratio but I couldn't find any answer fitting for my problem.
Here's my problem:
I want to have a div with perfect square aspect ratio inside a flex parent with a 100% height.
Here's my actual HTML:
<article class="article">
<header class="article-header">
<div class="article-header__user">
<div class="article-header__user-color"></div>
<p class="article-header__user-name">Damiano Mondaini</p>
</div>
<div class="article-header__more">
<a href="#" class="article-header__more-share-link">
<i class="article-header__more-share-icon">S</i>
</a>
</div>
</header>
</article>
Here's my actual CSS:
.article {
border-radius: 15px;
border: 1px solid #134B5F;
}
.article-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.article-header__user {
display: flex;
justify-content: flex-start;
align-items: center;
}
.article-header__user-color {
background: red;
}
Note:
<div class="article-header__user"> is the flex parent
<div class="article-header__user-color"> is the div that should be a square
I don't want to use JS
Thanks in advance

Answer 1

try like this
HTML
<article class="article">
<header class="article-header">
<div class="article-header__user">
<div class="article-header__user-color">
<p class="article-header__user-name">Damiano Mondaini</p>
</div>
<div class="article-header__more">
<a href="#" class="article-header__more-share-link">
<i class="article-header__more-share-icon">S</i>
</a>
</div>
</div>
</header>
</article>
css
.article {
border-radius: 15px;
border: 1px solid #134B5F;
}
.article-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.article-header__user {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.article-header__user-color {
background: red;
}

Answer 2

you were missing width and height on the <div class="article-header__user-color">
This should be the working code:
.article {
border-radius: 15px;
border: 1px solid #134B5F;
}
.article-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.article-header__user {
display: flex;
justify-content: flex-start;
align-items: center;
}
.article-header__user-color {
background: red;
width: 15px;
height: 15px;
}
<article class="article">
<header class="article-header">
<div class="article-header__user">
<div class="article-header__user-color"></div>
<p class="article-header__user-name">Damiano Mondaini</p>
</div>
<div class="article-header__more">
<a href="#" class="article-header__more-share-link">
<i class="article-header__more-share-icon">S</i>
</a>
</div>
</header>
</article>

Answer 3

My problem was that article or its children haven't any specified height. I'll give my article's header a hard coded height and it will work. Thanks everyone.