Is it possible overflo parent container with fixed child? - html

Question

I have a parent with auto height (in example I added height 300px for testing pupose) and child element with position: fixed. Is it possible stretch parent elem as long as child even if child has a fixed position?
<div class="parent">
<div class="fixed"></div>
</div>
.fixed {
position: fixed;
height: 750px;
width: 100%;
background: red;
opacity: 0.5;
margin: auto;
}
.parent {
height: 300px;
background: yellow;
}
Example here
https://jsfiddle.net/hz0wgx1w/

Answer 1

I can't think of a way to do this with CSS alone, but here's an example using jQuery to update the CSS so that the parent's height and width match the child's:
https://jsfiddle.net/hz0wgx1w/13/
Keep in mind that with the child fixed, it will not scroll in sync with the parent, so this only works to set their initial sizes to match. It does not ensure that their positions will continue to match while scrolling.
This also does not take responsiveness into account, so any change to the width of the child after page load will not cause the parent to update, though that could easily be accomplished with jQuery as well, depending on your objective.
I preserved your HTML, but it would be safer to use distinct IDs rather than classes if you plan to reuse these classes on other elements.
$(".parent").css("height", $(".fixed").css("height"));
$(".parent").css("width", $(".fixed").css("width"));
.fixed {
position: fixed;
height: 750px;
width: 100%;
background: red;
opacity: 0.5;
margin: auto;
}
.parent {
height: 300px;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="fixed"></div>
</div>