javascript 为什么当我将Stencil组件嵌套在一个带有显示flex的普通div中时，该组件不会显示，除非我将：host设置为width：百分百？

vbopmzt1 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(57)

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

test-wrapper有：

.test-wrapper { 
      display: flex;
    }

进度条具有：

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

有或没有宽度：100%在.progress-bar上，组件不显示，除非我添加：

:host { 
width: 100%
}

怎么了？
.progress-bar上的Display:flex应该有一个默认的width，即100%，因此它也应该将组件 Package 器（host）推送到width 100%，对吗？为什么需要显式地将其设置为width 100%？它的默认值是什么？

JavaScript

来源：https://stackoverflow.com/questions/76521152/why-when-i-nest-a-stencil-component-inside-a-normal-div-with-a-display-flex-the

1条答案

按热度按时间

91zkwejq1#

显示：进度条上的flex应该有一个默认的宽度100%
事实并非如此。大多数元素的默认值width是auto，这意味着元素决定它自己的大小（根据它自己的CSS属性和/或内容）。因此，宽度将由元素本身和布局上下文确定。将display属性设置为flex不会影响元素的大小。将元素放在flexbox布局中确实可以控制元素的大小，除非您使用justify-content: stretch并使元素大小为auto。其他与flexbox相关的属性，如flex，flex-grow，flex-shrink也会影响大小。你所需要做的就是使用flexbox将你的组件拉伸到100%：

.test-wrapper { 
      display: flex;
      justify-content: stretch;
   }

参见https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content。

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 为什么当我将Stencil组件嵌套在一个带有显示flex的普通div中时，该组件不会显示，除非我将：host设置为width：百分百？

1条答案

相关问题

热门标签

最新问答