Flexbox 内边长等于兄弟姐妹高度的空响应正方形

Question

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

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

正方形的边必须等于文本的行高（如果文本大小发生变化，框应缩放）；
如果文本大小发生变化，容器的高度也应发生变化。
盒子应该粘在弹性容器的右侧（现在是）。

我目前拥有的：

我正在努力实现的目标：

我试过 aspect-ratio CSS 属性，但如果没有明确的 height 声明，它就无法工作。如果我明确地将 height 设置为 100%，框会垂直折叠。填充技术仅适用于具有显式 width 的框，因此不适用。考虑将 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>

不过，我想您可能想要的不止这些 - 例如可点击。实现此目的的一种方法是单击整个内容元素 - 但这取决于功能上究竟需要什么。

Answer 2

您可以使用伪元素来创建该正方形：

* {
  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:before {
  content: "";
  display: block;
  height: 100%;
  box-sizing: border-box;
  aspect-ratio: 1;
  box-shadow: 0 0 0 1px inset red;
  transform: translate(-100%);
}

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

Flexbox 内边长等于兄弟姐妹高度的空响应正方形

Empty responsive square with sides equal to sibling's height inside a flexbox

html

css

aspect-ratio

flexbox

responsive-design