如何为含max-width的flex父元素添加平滑过渡（宽度由子元素控制）

问题的核心是：父元素宽度默认是auto（由子元素撑开），而CSS transition无法对auto值的变化做平滑过渡——必须给父元素设置明确的起始和结束宽度值，过渡才能生效。

以下是调整后的代码，实现父子元素宽度同步平滑过渡：

<div class="parent">
    <div class="child">this is the child</div>
</div>

<style>
    /* 统一盒模型，避免宽度计算混乱 */
    * {
        box-sizing: border-box;
    }

    .parent {
        padding: 8px;
        display: inline-flex;
        border: 2px solid red;
        max-width: 300px;
        /* 初始宽度：匹配子元素初始宽度+自身padding+border的总尺寸 */
        width: 40px;
        /* 给父元素添加宽度过渡 */
        transition: width 1s ease;
    }

    .child {
        white-space: nowrap;
        overflow: hidden;
        border: 2px solid green;
        /* 子元素初始宽度 */
        width: 20px;
        transition: width 1s ease;
    }

    .parent:hover {
        /* hover时父元素宽度过渡到max-width值 */
        width: 300px;
    }

    .parent:hover > .child {
        /* 子元素宽度占满父元素内容区 */
        width: 100%;
    }
</style>

关键调整说明： #

1. 明确父元素初始宽度：计算出子元素初始宽度+父元素padding+border的总尺寸（20px + 8px2 + 2px2 = 40px），作为父元素的初始width值，给过渡提供明确的起始点。
2. 父元素hover时过渡到max-width：让父元素从40px平滑过渡到300px，和子元素的宽度变化同步。
3. 统一盒模型：用box-sizing: border-box确保width值包含padding和border，避免计算误差。

如果需要调整子元素初始宽度，只需同步修改父元素的初始width值（保持父元素总宽度=子元素宽度+padding+border），就能维持平滑过渡效果。

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