如何让绝对定位容器宽度自适应内部内容并适配父容器？

核心调整点 #

• 给绿色盒子添加box-sizing: border-box，确保padding包含在设置的高度内，避免容器尺寸计算偏差
• 保留width: fit-content实现宽度自适应文本，配合white-space: nowrap维持单行显示（如需换行可移除该属性）
• 维持基于容器单位的尺寸设置，保证盒子和字体随父容器动态变化

修改后的完整代码 #

.outerBox {
  container-type: size; 
  width: 400px; 
  height: 400px; 
  border: 1px solid green;
  position: relative;
}

.highlightBox {
  border-radius: 4px;
  background-color: #32db01;
  box-shadow: 2px 2px 3px 0 #000;

  padding: 2.8cqh;
  height: 10cqh;
  width: fit-content;
  min-height: 30px;
  /* 关键：盒模型包含padding，保证height设置准确 */
  box-sizing: border-box;

  position: absolute;
  bottom: 2.5cqh; 
  right: 2.5cqh;
  container-type: size;
  white-space: nowrap;
}

.dynamicText {
  font-weight: bold;
  /* 基于highlightBox高度的80%设置字体大小，随盒子高度动态变化 */
  font-size: 80cqh;
  line-height: 80cqh;
}

<div class="outerBox">
  <div class="highlightBox">
    <span class="dynamicText">
      dynamic button text
    </span>
  </div>
</div>

原理说明 #

1. 宽度自适应：width: fit-content会让盒子宽度刚好包裹内部文本内容，结合white-space: nowrap确保文本不换行（如果需要多行显示，可移除white-space: nowrap）。
2. 尺寸适配父容器：通过container-type: size定义容器上下文，cqh单位会基于父容器的高度计算，保证绿色盒子的padding、高度随外部盒子尺寸动态变化。
3. 字体自适应盒子高度：dynamicText的font-size: 80cqh是基于绿色盒子（自身作为容器）的高度设置，字体大小会随绿色盒子高度同步调整。

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