html - 在 flex parent 中保持纵横比

Question

我知道有很多话题都在讨论宽高比，但我找不到适合我的问题的答案。

这是我的问题:

我想在高度为 100% 的 flex 父级中有一个具有完美方形纵横比的 div。

这是我的实际 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>

这是我的实际 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;
}

注意:

• <div class="article-header__user">是灵活的 parent
• <div class="article-header__user-color">是应该是正方形的div
• 我不想使用 JS

提前致谢

Answer 1

这样试试

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