html - Why does my div does not recognize the height of custom components inside itself? -

i have div has handful of custom components in it, , i'm trying put border around container, container div's height not affected it's contents.

this mock of div

<div style="border: 1px solid black">     <mycustomcomponent1></mycustomcomponent1>     <mycustomcomponent2></mycustomcomponent2>     <mycustomcomponent3></mycustomcomponent3> </div> 

where mycustomcomponent1, 2, , 3 point different html files contain varying contents that, sake of example, make each 1 height of 200px , width of 400px.

so expect div containing these have border 400px wide, , 600px tall. instead border appears narrow box @ top of elements.

my first guess contained components floating, taken out of flow of document. in order container resize fit floating children make container block formatting context adding overflow: hidden style of container.

another option set display on contained elements display: block or display: inline-block depending on how should act. needed because of custom tag name.

if turns out not issue i'll update answer, of it's hard not enough information given