There are 2 div elements. The parent div has a relative position, while the child div has a fixed position.
If a fixed amount of width is applied to the parent div, using width: inherit; works flawlessly.
However, when setting width: 100%; on the parent div, the child div ends up wider than its parent.
*,
*::before,
*::after {
box-sizing: border-box;
}
.content {
position: relative;
background: black;
width: 100%;
}
.fixedElement {
position: fixed;
width: inherit;
background: yellow;
z-index: 2;
top: 0px;
}<div class="content">
parent
<div class="fixedElement">
child
</div>
</div>Is there something that I am missing in this setup?
I am considering resorting to using jQuery to adjust the child's width, although I understand that it should ideally be solvable using only css.