实现父容器自适应子元素宽度且子元素可扩展至max-width

我希望父容器能够收缩以适配其子元素的内容，这可以通过inline-block或inline-flex实现。但同时希望子元素能够扩展至设置的max-width，不受其内容限制——目前的问题是，子元素只有在内容足够时才会扩展到max-width，我想要子元素尽可能占据最大宽度，父容器随之调整。

CSS #

.red-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    container-type: inline-size;
    container-name: page-wrapper;
    padding: 20px;
    border: 1px solid red;
}

.blue-header {
  border: 1px solid blue;
  text-align: center;
}

/* 组件内部样式 */
.green-dynamic-content {
  max-width: 500px; /* 期望达到500px但未生效 */
  border: 1px solid green;
  padding: 5px;
}

.orange-footer {
  border: 1px solid orange;
  text-align: right;
}

HTML #

<div class="red-wrapper">
  <div class="black-content">
    <div class="blue-header">
      Header
    </div>
    
    <!-- 加载的组件 -->
    <div class="green-dynamic-content">
      Width set by component
    </div>
    <!-- 组件结束 -->
    
    <div class="orange-footer">
      Footer
    </div>
  </div>
</div>

只需对现有样式做两处修改：

1. 给.black-content添加max-width: 500px和width: 100%，让它能扩展到目标最大宽度，同时父容器.red-wrapper会适配这个宽度
2. 给.green-dynamic-content设置width: 100%，使其填满.black-content的宽度

修改后的CSS：

.red-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    container-type: inline-size;
    container-name: page-wrapper;
    padding: 20px;
    border: 1px solid red;
}

.blue-header {
  border: 1px solid blue;
  text-align: center;
}

.black-content {
  max-width: 500px;
  width: 100%;
}

/* 组件内部样式 */
.green-dynamic-content {
  max-width: 500px;
  width: 100%;
  border: 1px solid green;
  padding: 5px;
}

.orange-footer {
  border: 1px solid orange;
  text-align: right;
}

调整后，.green-dynamic-content会始终填满.black-content的宽度，.black-content最大扩展到500px，.red-wrapper则会根据.black-content的宽度收缩适配，同时满足两个需求。

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