设置max-width的父DIV无法贴合子SPAN宽度（纯CSS解决方案）

问题核心是块级元素（div默认）的默认宽度规则：未显式设置width时，block元素会自动占满父容器的可用宽度，即使子元素宽度更小，它也会拉伸到max-width的设定值。要让父div宽度贴合子元素宽度（含自身边框），需要修改它的宽度计算逻辑，以下是两种可行方案：

方案1：使用display: inline-block + max-width #

修改父div的display属性为行内块，让它的宽度由内容决定，同时保留max-width的上限限制：

.borderDiv {
    max-width: 300px;
    border: 1px solid #bebdbd;
    display: inline-block;
}

当子span内容宽度小于300px时，父div会收缩到子元素宽度+边框的总和；当内容超过300px时，父div会扩展到300px，子元素自动换行。

方案2：使用width: fit-content + max-width #

通过width: fit-content直接指定父div宽度为内容所需的最小宽度，同时用max-width限制最大宽度：

.borderDiv {
    max-width: 300px;
    border: 1px solid #bebdbd;
    width: fit-content;
}

这个方案不需要改变display类型（div依然是block元素），同样能实现“内容自适应+最大宽度限制”的效果，兼容性也较好（现代浏览器均支持）。

关于你尝试过的方法无效的说明 #

• 若之前用inline-block无效，可能是父容器存在额外布局规则（比如text-align: justify、强制父容器宽度100%等），可以检查父元素的样式是否影响了当前div的宽度计算；
• border-box是盒模型属性，它只改变元素自身宽高的计算方式（包含边框和内边距），不会改变block元素的默认宽度规则，因此单独使用无法解决问题；
• flex布局下，若父div设置display: flex，默认会让子元素占满主轴空间，但你需要给父div添加width: fit-content或inline-flex才能让父容器收缩到内容宽度，单纯设置flex无法直接实现需求。

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