html - 空的响应式正方形，其边长等于 flex 盒内 sibling 的高度

Question

我有一个 flex 容器，里面有两个元素。

其中一个是 div 内的文本。第二个是一个应该是正方形的盒子。

• 正方形的边长必须等于文本的行高(如果文本大小发生变化，框应缩放)；
• 如果文本大小发生变化，容器的高度也会发生变化。
• Box 应粘在 flex 容器的右侧(现在是这样)。

到目前为止我所拥有的:

我正在努力实现的目标:

我尝试过 aspect-ratio CSS 属性，但如果没有明确的 height 声明，它就不起作用。如果我明确将 height 设置为 100%，盒子会垂直折叠。填充技术仅适用于具有明确宽度的框，因此不适用。考虑过使用 font-size 作为 height，但前者不等于 line-height。

寻找 CSS 解决方案。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 22px;
}

.container {
  position: relative;
  left: 30%;
  top: 50px;
  width: 40%;
  border: 1px solid black;
  padding: 8px 24px;
  border-radius: 30px;
}

.task {
  display: flex;
  justify-content: space-between;
  border: 1px solid green;
}

.task-info {
  border: 1px solid blue;
}

.task-button {
  border: 1px solid red;
}

<div class="container">
  <div class="task">
    <div class="task-info">
      Content
    </div>
    <div class="task-button">
    </div>
  </div>
</div>

Answer 1

如果您只需要右侧有一个正方形，那么可以将其绘制为伪元素:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 22px;
}

.container {
  position: relative;
  left: 30%;
  top: 50px;
  width: 40%;
  border: 1px solid black;
  padding: 8px 24px;
  border-radius: 30px;
}

.task {
  display: flex;
  justify-content: space-between;
  border: 1px solid green;
  position: relative;
}

.task-info {
  border: 1px solid blue;
}

.task-info::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid red;
  height: 100%;
  aspect-ratio: 1;
  z-index: -1;
}

.task-button {
  border: 1px solid transparent;
}

<div class="container">
  <div class="task">
    <div class="task-info">
      Content
    </div>
  </div>
</div>

但是，我想您可能想要的不仅仅是这个 - 例如可点击。实现此目的的一种方法是单击整个内容元素 - 但这具体取决于功能所需的内容。