绝对定位元素无法自适应调整大小问题求助

我来帮你搞定这个布局问题～看了你的代码，核心问题出在多层容器的嵌套逻辑和定位方式上，导致浏览器没法正确计算元素的尺寸和位置。咱们直接调整代码，实现你想要的「方形容器+居中文本+右上角权重标记」的效果：

修复后的完整代码 #

<html>
<head>
<style>
.board {
  font-size: 8em;
  /* 加个最大宽度防止容器超出视口 */
  max-width: 100vw;
}
.cellContainerOuter {
  width: 100%;
  /* 用CSS原生宽高比属性实现方形，比padding-bottom更直观可靠 */
  aspect-ratio: 1 / 1;
  position: relative;
  background-color: yellow;
  border: 1px solid black;
}
.cellContainerInner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  /* 用Flex布局快速实现垂直水平双居中 */
  align-items: center;
  justify-content: center;
}
.text {
  /* 限制文本区域的大小，避免溢出容器 */
  width: 60%;
  height: 60%;
  overflow: hidden;
  text-overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}
.weight {
  position: absolute;
  right: 2px;
  top: 2px;
  border: 1px solid white;
  /* 加个半透明背景，避免和黄色容器融合看不清 */
  background-color: rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="board">
  <div id="cell3_C_1" class="cellContainerOuter" title="喟�">
    <div id="cell_C_1" class="cellContainerInner" title="喟�">
      <span id="weight_C_1" class="weight" title="6">6</span>
      <span id="text_C_1" class="text" title="喟�">喟�</span>
    </div>
  </div>
</div>
</body>
</html>

关键改动说明 #

• 简化方形容器实现：把原来依赖padding-bottom:100%的方式换成aspect-ratio:1/1，这是CSS原生的宽高比属性，浏览器能精准计算容器尺寸，自适应时不会出现位置错乱。
• 精简容器层级：去掉了多余的.cellContainer嵌套层，减少定位冲突，让布局逻辑更清晰。
• 改用Flex居中：抛弃了table/table-cell的老旧居中方式，用Flex布局实现文本的垂直水平双居中，自适应时能稳定保持居中效果。
• 调整文本尺寸控制：把原来的bottom/top/left/right:20%改成width:60%;height:60%，配合Flex居中，确保文本始终在容器中间的固定比例区域内，不会溢出。
• 优化权重标记可读性：给右上角的.weight加了半透明背景，避免和黄色容器背景融合，提升辨识度。

修改后，容器会随着父元素宽度自动调整为方形，内部文本始终居中，右上角的权重标记也能固定在正确位置，浏览器会正常计算所有元素的尺寸和位置啦～

内容的提问来源于stack exchange，提问作者Dileep.M