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

210

July 29, 2017, at 09:19 AM

I have a div that has a handful of custom components in it, and I'm trying to put a border around that container, but the container div's height is not affected by it's contents.

This is a mock up of the div

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

Where myCustomComponent1, 2, and 3 point to different html files that contain varying contents that, for the sake of this example, would make each one be a height of 200px and width of 400px.

So I would expect the div containing these to have a border that is 400px wide, and 600px tall. But instead the border appears only as a narrow box at the top of my elements.

Answer 1

My first guess is that the contained components are floating, thus taken out of the flow of the document. In order to get the container to resize to fit floating children make the container a block formatting context by adding overflow: hidden to the style of the container.

Another option is to set the display on the contained elements to display: block or display: inline-block depending on how they should act.

If this turns out to not be the issue I'll update this answer, but as of now it's hard to say as not enough information is given

Answer 2

In order to upload html files in "myCustomComponents" you can use iframe resizer. Otherwise you cannot control the height, even if you make it 100%.

If the html files that you are trying to upload in the "myCustomComponents" are stored on the same server you can use the iframe resizer https://github.com/davidjbradshaw/iframe-resizer.

Or you can check for how to include html file in other html: https://www.w3schools.com/howto/howto_html_include.asp