如何让flex子项与自适应高度父项等高且保持aspect-ratio生效？

原实现中按钮的aspect-ratio未生效，仅显示2px边框，需要实现：

• 按钮为完美正方形，宽度与动态高度相等
• 按钮高度跟随父项文本的line-height（适配未知行高场景）
• 容器保持inline-*类型布局
• 仅允许在button外层添加包裹元素，尽量不修改原有HTML结构

步骤1：修改HTML结构 #

给按钮添加外层包裹元素：

<div class="copy-text">
  <span>/api</span>
  <span class="btn-wrap">
    <button title="Copy Text" type="button" class="copy"></button>
  </span>
</div>

步骤2：调整CSS样式 #

通过外层容器实现正方形适配，完整代码如下：

body {
  background: #121212;
  color: white;
}

.copy-text {
  display: inline-flex;
  column-gap: 5px;
  font-size: 30px;
  /* 可测试不同line-height验证适配性，例如 line-height: 1.8; */
}

/* 新增按钮外层容器 */
.btn-wrap {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  aspect-ratio: 1; /* 基于高度自动生成等宽宽度，形成正方形 */
}

.copy-text button {
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
  background-position: 50%;
  background-size: 20px;
  background-repeat: no-repeat;
  transition: border-color 0.25s;
  padding: 0;
  background-color: transparent;
  width: 100%;
  height: 100%; /* 填满外层正方形容器 */
}

.copy-text button:hover {
  border-color: #666;
}

原理说明 #

1. .btn-wrap通过height: 100%继承父容器.copy-text的高度，该高度由文本的line-height决定，实现按钮高度跟随文本行高。
2. aspect-ratio: 1让容器宽度自动等于高度，形成完美正方形。
3. 按钮设置width:100%; height:100%填满外层容器，保留原有交互样式。
4. .copy-text使用inline-flex，符合容器必须为inline或inline-*类型的要求，可正常嵌入文本流。

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