如何在Flex容器中实现Div宽高相等并继承父元素拉伸高度？

我有一个包含App-Logo、导航栏及若干控件的头部导航栏（headerbar），该导航栏为Flex容器，高度由内部内容决定，未设置固定值。现在我希望App-Logo能垂直拉伸填满可用空间，并保持1:1的宽高比。

预期效果：

现有尝试代码：

.headerbar {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: .5rem;
  background: #f0f0f0;
  border-bottom: 1px solid gray;
}

.logo {
  aspect-ratio: 1 / 1; /* 未生效 */
  border-radius: 5px;
  background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
}

<div class="headerbar">
  <div class="logo"></div>
  <p>Link 1</p>
  <p>Link 2</p>
  <p>Link 3</p>
</div>

当前问题：Logo未显示，虽然它能垂直拉伸，但aspect-ratio无法作用于宽度，宽度始终为0。我原本期望aspect-ratio:1/1能让宽度等于由align-items:stretch继承来的高度，实现宽高相等。

要实现这个效果，核心是让Logo先确定高度，再基于高度推导宽度，以下是两种可行方案：

方案一：基于padding的宽高比技巧 #

利用padding-top: 100%（padding值基于元素宽度计算）的特性，配合伪元素实现1:1比例，同时让Logo继承父容器高度：

.headerbar {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: .5rem;
  background: #f0f0f0;
  border-bottom: 1px solid gray;
}

.logo {
  flex: 0 0 auto; /* 避免被Flex布局挤压或拉伸 */
  position: relative;
  height: 100%; /* 填满父容器高度 */
}

.logo::before {
  content: '';
  display: block;
  padding-top: 100%; /* 实现1:1宽高比 */
  background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
  border-radius: 5px;
}

方案二：明确高度+aspect-ratio #

给Logo设置height:100%继承父容器高度，再通过aspect-ratio推导宽度，配合width: min-content确保宽度由高度和比例决定：

.headerbar {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: .5rem;
  background: #f0f0f0;
  border-bottom: 1px solid gray;
}

.logo {
  height: 100%; /* 填满父容器高度 */
  aspect-ratio: 1/1;
  width: min-content; /* 让宽度由高度和比例推导 */
  border-radius: 5px;
  background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
}

原理说明 #

Flex容器中align-items: stretch仅会拉伸子元素的高度，但空<div>的默认宽度为0，aspect-ratio需要至少一个维度有明确值才能计算另一个维度。上述两种方案都是先让Logo获取父容器的高度，再通过不同方式基于高度确定宽度，最终实现1:1的宽高比。

内容的提问来源于stack exchange，提问作者Chiff Shinz