如何实现div扩展时参考子元素max-width限制并在父容器内居中

该需求仅通过HTML/CSS即可实现，无需引入JavaScript。
你只需要修改.inner-container的样式规则即可，修改点如下：

• 新增width: 100%，保证父容器宽度较小时，inner-container可以撑满整个outer-container
• 新增max-width: max-content，限制inner-container的最大宽度等于子元素的总宽度（即content0的内容宽度 + content1的最大宽度500px + inner-container自身的内边距、边框宽度），避免content1达到最大宽度后inner-container继续拉伸
• 将原有的margin值修改为margin: 2px auto，左右auto可以让inner-container在宽度小于outer-container时自动居中

修改后的完整代码如下：

<html>
    <header>
        <style>
.outer-container {
    margin: 2px;
    padding: 2px;
    border: 1px deeppink dashed;
}

.inner-container {
    margin: 2px auto; /* 左右auto实现居中 */
    padding: 2px;
    border: 1px deeppink dotted;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%; /* 窄屏时撑满父容器 */
    max-width: max-content; /* 限制最大宽度为子元素总宽度 */
}

.content0 {
    background-color: black;
    color: white;
    border: 1px red solid;
    white-space: nowrap;
}

.content1 {
    max-width: 500px;
    background-color: black;
    color: white;
    flex-grow: 1;
    border: 1px red solid;
    white-space: nowrap;
}
        </style>
    </header>
    <body>
        <div class="outer-container" style="width: 100%">
            <div class="inner-container">
                <div class="content0">Placeholder</div>
                <div class="content1">Placeholder</div>
            </div>
        </div>
    </body>
</html>

如果需要兼容不支持max-content的旧版浏览器，可以将max-width: max-content替换为max-width: fit-content，两者在该场景下效果一致。

内容的提问来源于stack exchange，提问作者test failed in 1.08s