如何避免position: relative父元素的absolute子元素越界时收缩

问题分析 #

当父元素设为position: relative，子元素position: absolute且设置left: 300px时，子元素的包含块是父元素，其可用宽度为父元素宽度减去left值（400px - 300px = 100px），这导致max-width: 240px无法生效——因为可用空间小于max-width，子元素会被强制收缩到100px。

解决方案 #

给子元素添加width: max-content，配合现有max-width即可实现需求：内容较少时自适应宽度，内容足够时扩展至max-width设定值，不受父元素可用空间限制。

修改后的CSS代码：

#outer {
  position: relative;
  width: 400px;
  height: 400px;
  border: 4px solid red;
  margin: 0 auto;
}

#inner {
  position: absolute;
  left: 300px;
  top: 0;
  max-width: 240px;
  width: max-content; /* 关键新增属性 */
  border: 4px solid blue;
}

原理说明 #

• width: max-content会让元素宽度由内部内容的最大宽度决定，忽略包含块的可用空间限制；
• max-width: 240px则限制了元素的最大宽度，当内容宽度超过240px时，元素会自动换行并保持240px宽度；
• 两者结合既满足了少量内容时的自适应，又保证了内容较多时能扩展到设定的最大宽度。

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