为何Stencil组件在flex容器中需设置:host宽度100%才显示？

场景复现 #

HTML结构 #

<div class="test-wrapper">
  <ifx-progress-bar value="50" show-label="true"></ifx-progress-bar>
</div>

外部容器样式 #

.test-wrapper { 
  display: flex;
}

组件内部初始样式 #

.progress-bar {
  display: flex;
  height: 16px;
  border-radius: 1px;
  /* width: 100%; 未启用 */
  overflow: hidden;
}

问题现象 #

无论是否给.progress-bar设置width: 100%，组件都无法正常显示；只有给组件宿主添加以下样式后，组件才恢复正常：

:host { 
  width: 100%
}

核心疑问 #

• 为何.progress-bar设置display: flex后，无法推动组件宿主（:host）自动占满宽度？
• :host的默认宽度规则是什么？

问题解答 #

1. :host的默认显示特性 #

自定义元素的宿主（:host）默认属于行内级元素，它的宽度完全由内部内容的实际宽度决定，不会自动填充父容器的可用空间。哪怕内部的.progress-bar是flex元素，也没法突破宿主的行内宽度限制。

2. Flex容器子元素的宽度逻辑 #

父容器.test-wrapper是flex容器，它的直接子元素（也就是<ifx-progress-bar>宿主）默认遵循flex-grow: 0规则——不会主动拉伸去占满容器的剩余空间。只有当子元素被显式设置width: 100%，或者添加flex-grow: 1时，才会填充flex容器的可用宽度。

3. 内部元素无法推动宿主宽度的原因 #

.progress-bar作为组件内部的flex元素，宽度默认是auto（根据内容或父容器自适应），但它的父容器是:host（行内元素），:host本身不会主动扩展到父flex容器的100%宽度，所以.progress-bar只能在:host的有限宽度内渲染，最终导致组件看起来“无法显示”。

当给:host设置width: 100%后，宿主元素会占满flex容器的整个宽度，内部的.progress-bar自然就能在这个宽度范围内正常渲染。

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