Inheritance width does not work with percentage

Question

I have 2 divs. The parent divhas a position relative, and the child divhas fixed.

If I use flat quantity widthfor parent div, it width: inherit;works fine. When I use width: 100%;in parent div, the child divhas more widththan 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>

Run codeHide result

Fiddle

Did I miss something?

I am thinking of using jQueryfor installation widthfor a child, but I am sure that this is not a very good solution, since it can only be resolved using css.

Answer 1

body margin. , , - . body .

, , position: relative. CSS,

body {
    margin: 0;
}

.

Answer 2

position: fixed top: 0 child div, . div position: fixed, , position: fixed top. .

display: inline-block

Answer 3

, , , .