为什么我的div不能识别自身内部自定义组件的高度？

Question

我有一个包含少量自定义组件的div，我试图在该容器周围放置一个边框，但容器div的高度不受其内容的影响。

这是div的模拟

<div style="border: 1px solid black">
    <myCustomComponent1></myCustomComponent1>
    <myCustomComponent2></myCustomComponent2>
    <myCustomComponent3></myCustomComponent3>
</div>

myCustomComponent1，2和3指向包含不同内容的不同html文件，为了这个示例，每个文件都会使200px高度为{{ 1}}和400px的宽度。

所以我希望包含这些的div具有400px宽，600px高的边框。但相反，边框只显示在我元素顶部的一个窄框中。

Answer 1

我的第一个猜测是所包含的组件是浮动的，因此从文档流中取出。为了使容器调整大小以适应浮动子，通过将overflow: hidden添加到容器的样式，使容器成为块格式化上下文。

另一种选择是将所包含元素的display设置为display: block或display: inline-block，具体取决于它们应如何操作。由于自定义标记名称，这是必需的。

如果事实证明这不是问题，我会更新此答案，但截至目前很难说因为没有提供足够的信息