I have one use case where I need to blur only the parent element, not children.
Let us take an example,
<div class="parent">
<div class="children">
This will contain dynamic elements so height is not fixed.
</div>
</div>
In this case, according to the dynmic content in the children, parent class height would increase/decrease accordingly and the border looks good but applying filter blur would make all children blur.
Now if I make both div to siblings to achieve blur in the parent,
<div id="parent" style="position:absolute;height:100%;width:100%;background-color:red;filter: blur(3px);z-index:-1;"></div>
<div id="children">
This will contain dynamic elements so height is not fixed.
</div>
Then the dynamic height of the child element is tricky to handle.
Parent element provides background for child element so if child element grows then parent element should also grow.
And backdrop-filter: blur(2px); does not have full support in all browser so I do not want to use it.
To summarize, I want to have blur in the parent but at the same time, child element should not have any impact if child element height would grow then parent element height should also grow.
Please help. Thanks in advance.
