绝对定位容器内子元素如何填满父元素max-width？

你的核心问题是：绝对定位的.abs容器默认会根据内部内容收缩宽度，导致它的子元素.parent不会主动扩展到设置的max-width:300px，最终.child的100%宽度也只能匹配内容宽度，达不到预期的填满效果。下面是几种不用移除绝对定位的解决办法：

方法一：同步绝对定位容器与父元素的宽度限制 #

给.abs设置和.parent一致的max-width，同时让.parent填满.abs的宽度：

.abs {
  position: absolute;
  top: 50px;
  width: 100%;
  max-width: 300px; /* 和.parent的max-width保持一致 */
}

.parent {
  max-width: 300px;
  width: 100%; /* 确保.parent填满.abs的可用宽度 */
}

.child {
  width: 100%;
  background-color: lightblue;
}

方法二：拉伸绝对定位容器的水平空间 #

利用绝对定位的拉伸特性，让.abs自动填充父容器的水平宽度，这样.parent的max-width就会生效：

.abs {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0; /* 拉伸至父容器的左右边缘 */
}

.parent {
  max-width: 300px;
  margin: 0 auto; /* 可选，让.parent在.abs内居中 */
}

.child {
  width: 100%;
  background-color: lightblue;
}

方法三：强制父元素扩展至max-width #

如果不想修改.abs的样式，可以给.parent添加width: 100%，同时配合min-width确保它至少达到内容宽度（如果内容超过300px则受max-width限制）：

.abs {
  position: absolute;
  top: 50px;
}

.parent {
  max-width: 300px;
  width: 100%;
  min-width: fit-content; /* 确保内容较小时不会收缩到小于内容宽度 */
}

.child {
  width: 100%;
  background-color: lightblue;
}

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