html - Set width of fixed positioned div relative to his parent having max-width -

is there solution without js?

html

<div class="wrapper">    <div class="fix"></div> </div> 

css

.wrapper { max-width: 500px; border: 1px solid red; height: 5500px; position: relative; }   .fix { width: inherit; height: 20px; position:fixed; background: black; } 

i cant add other styles .wrapper except width: 100%;. try width: inherit doesn't work me because of have parent div max-width. source

here jsfiddle demo

a position:fixed element not relative parent anymore. respects viewport's boudaries.

mdn definition:

fixed
not leave space element. instead, position @ specified position relative screen's viewport , don't move when scrolled.

so width, max-width, or whatever property not respected fixed element.

edit

in fact, won't inherit width because there's no width property defined on wrapper.. so, try setting child width: 100% , inherit max-width:

http://jsfiddle.net/mx6anluu/2/

.wrapper {     max-width: 500px;     border: 1px solid red;     height: 5500px;     position: relative; }   .fix {     max-width: inherit;     width: 100%;     height: 20px;     position:fixed;     background: black; }