如何让宽高未定义的父Div与子元素尺寸一致？附纯CSS布局需求

刚好我之前处理过类似的场景，纯CSS就能完美解决这两个问题，分两部分给你拆解方案：

问题1：让父div尺寸与固定宽高的子元素a完全匹配 #

父div默认是块级元素，宽度会占满可用空间，所以要让它收缩到子元素的尺寸，有两种简单靠谱的方案：

• 方案1：给父div设置display: inline-block
  inline-block元素的宽高由内部内容自动撑开，刚好子元素a是固定宽高，所以父div会完全匹配a的尺寸。

• 方案2：用display: fit-content（现代浏览器友好）
  直接给父div设置width: fit-content; height: fit-content;，它会自动收缩到内容的精确尺寸，现在主流浏览器都支持这个属性了。

代码示例：

<div class="parent">
  <a href="#" class="child-a">固定宽高的a标签</a>
</div>

<style>
.child-a {
  display: block; /* a默认是inline元素，必须转成块级才能生效固定宽高 */
  width: 200px;
  height: 100px;
  background: #42b983;
}

/* 方案1（二选一即可） */
.parent {
  display: inline-block;
  border: 2px solid #333; /* 加边框方便看效果 */
}

/* 方案2 */
/* .parent {
  width: fit-content;
  height: fit-content;
  border: 2px solid #333;
} */
</style>

问题2：让div c显示在a后方，高度为父元素120%，仅显示底部部分 #

核心思路是利用相对定位+绝对定位，配合overflow: hidden隐藏超出部分，同时调整c的位置让它的底部区域刚好显示在父容器内：

1. 父元素设置position: relative，作为绝对定位的参考容器
2. div c设置position: absolute，宽度占满父容器，高度设为120%
3. 给c设置top: -20%，让它的底部和父容器底部对齐，这样超出父容器顶部的部分会被隐藏
4. 给a设置position: relative和z-index: 1，确保a在c的上方，不会被c遮挡

代码示例：

<div class="parent">
  <a href="#" class="child-a">固定宽高的a标签</a>
  <div class="child-c">仅显示底部的c标签</div>
</div>

<style>
.child-a {
  display: block;
  width: 200px;
  height: 100px;
  background: #42b983;
  position: relative;
  z-index: 1; /* 确保a在c的上方 */
}

.parent {
  display: inline-block; /* 复用问题1的方案，让父容器匹配a的尺寸 */
  border: 2px solid #333;
  position: relative; /* 作为c的定位参考 */
  overflow: hidden; /* 隐藏c超出父容器的部分 */
}

.child-c {
  position: absolute;
  top: -20%; /* 向上偏移20%，让底部与父容器对齐 */
  left: 0;
  width: 100%;
  height: 120%;
  background: #ff7a59;
  opacity: 0.8; /* 加透明度方便看到a和c的层级关系 */
}
</style>

这个方案完全不需要用display: table或者overflow: overlay，纯CSS就能达到你要的效果，你可以直接复制代码调整参数试试～

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