父元素用flex时，container-type: inline-size组件宽度异常求助

问题背景 #

我通过CSS的container-type: inline-size属性，实现元素自身宽度变化时应用不同样式，核心代码如下：

.alert-container {
    container-type: inline-size;
}
@container (width <=320px) {
    .alert {
        border-radius: $u-8 !important;
    }
    .wideActionButtons {
        display: none !important;
    }
}

完整代码片段：

CSS #

.alert-section[_ngcontent-rlf-c518] {
    margin-left: 15px;
    margin-right: 15px;
}
.justify-space-between {
    display: flex;
    justify-content: space-between;
}
.mt-2 {
    margin-top: 0.5rem !important;
}
.d-flex {
    display: flex !important;
}
dew-alert .alert-container {
    container-type: inline-size;
}
.alert {
    background-color: yellow;
    color: red;
}
.normal-text{
    height: 45px;
    background-color: #143D60;
    color: #EB5B00;
}

HTML #

<div class="d-flex mt-2 alert-section">
    <div>
        <dew-alert>
            <div class="alert-container alert">
                hi here is the content with container-type: inline-size style
            </div>
        </dew-alert>
    </div>
    <div class="d-flex justify-space-between normal-text">Hi this is normal content 
    and this can have some more child also</div>
</div>

但当父元素使用flex布局时，目标组件出现异常：宽度显示为0，但高度正常。我无法/不想给组件设置固定宽度，尝试多种CSS属性均无效；同时不想移除container-type: inline-size，因为未找到替代方案——@media仅针对视口尺寸，无法满足根据元素自身宽高变化调整样式的需求。

解决方案 #

问题根源在于flex布局的子项默认会根据内容收缩，而container-type: inline-size依赖容器的可用空间计算宽度，两者叠加导致元素宽度坍缩。可以通过以下两步修复：

1. 给包含<dew-alert>的flex子项添加flex: 1，让它占据容器的可用空间
2. 给.alert-container设置width: 100%，确保容器宽度继承父元素的可用空间，正确计算inline-size

修改后的代码如下：

调整后的CSS #

/* 新增：给dew-alert的父div设置flex属性 */
.alert-section > div:first-child {
    flex: 1;
}
dew-alert .alert-container {
    container-type: inline-size;
    width: 100%; /* 新增：确保容器宽度占满父元素 */
}
/* 其余原有CSS保持不变 */
.alert-section[_ngcontent-rlf-c518] {
    margin-left: 15px;
    margin-right: 15px;
}
.justify-space-between {
    display: flex;
    justify-content: space-between;
}
.mt-2 {
    margin-top: 0.5rem !important;
}
.d-flex {
    display: flex !important;
}
.alert {
    background-color: yellow;
    color: red;
}
.normal-text{
    height: 45px;
    background-color: #143D60;
    color: #EB5B00;
}

可选HTML调整（无需修改CSS选择器） #

如果不想用CSS选择器定位，也可以直接给目标div添加类：

<div class="d-flex mt-2 alert-section">
    <div class="flex-grow-1"> <!-- 新增类，对应flex:1 -->
        <dew-alert>
            <div class="alert-container alert">
                hi here is the content with container-type: inline-size style
            </div>
        </dew-alert>
    </div>
    <div class="d-flex justify-space-between normal-text">Hi this is normal content 
    and this can have some more child also</div>
</div>

同时在CSS中补充：

.flex-grow-1 {
    flex: 1;
}

这样既保留了container-type: inline-size的特性，又解决了flex布局下宽度坍缩的问题，无需设置固定宽度。

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