How do I set the height of a div programmatically in the LWC's HTML file?

Question

I have an outer div which wraps an inner div with a dynamic amount of content in it. For reasons that are beyond the scope of this question, I want to set the height of the outer div to match the height of the inner div once the content is loaded.

Because the content that is loaded into the div is dynamic, the height could potentially be anything (within reason. It is unlikely to be measured in kilometers, for instance.). I am therefore inspecting the DOM and determining the height of the inner div. I concatenate that value in a string like so: this.outerHeight = 'height: '+innerheight+'px;'; I then reference this variable in the HTML file like so: <div style={outerheight}>.

This works. The file saves and gets deployed to my org and everyone rejoices.

However...

For some reason I get problems reported in VS Code indicating that assigning a variable to the Style attribute is a no-no. Specifically it tells me I can't have an empty ruleset. The HTML file is red in the file tree. Again, it works fine, but it is really getting on my nerves that the file is red and I am seeing problems reported.

How do I fix this? Is there a better way to set the height of a div using a variable? (Please do not tell me to use a class, I am trying to do a thing with overflow:hidden, and you need to set the containing div with an explicit height for that to work, since the height could be anything I do not want to write a thousand classes to cover a thousand different possible heights.) Passing a variable into every other tag attribute works fine, why is style so picky?

Thanks for any insight, tips, or tricks you have.

Answer 1

You can directly assign the style to the element.

<div lwc:ref="container">

this.refs.container.style = `height: ${innerheight}px;`;

You can also use style directly, as in:

this.refs.container.style.height = `${innerheight}px`;

These are only examples, there's a lot of ways you can do this.