Why I can't set width of fixed 100% - html

Question

I have problem with fixed element, I wan't to set her width 100% relative to the second parent div .container
http://jsfiddle.net/q7wcam7x/2/
HTML
<div class="container">
<div class="header">
<div class="fixed">
!
</div>
</div>
</div>
CSS
.container{
width:300px;
position:relative;
margin:auto;
}
.header{
position:relative;
border:1px solid red;
height:300px;
}
.fixed{
position:fixed;
width:inherit;
height:10px;
background-color:blue;
}

Answer 1

This isn't possible with position:fixed, because fixed positioning is relative to the viewport (or the "screen").
However, this could be done with position:absolute, which causes the element to position itself relative to the closest parent that has the position property set on it:
http://jsfiddle.net/q7wcam7x/6/
HTML:
<div class="container">
<div class="header">
<div class="fixed">
dasdasdasdadddddddds
dsa
asdd
asd
</div>
</div>
</div>
CSS:
.container{
width:300px;
position:relative;
margin:auto;
}
.header{
border:1px solid red;
height:300px;
}
.fixed{
position:absolute;
width:100%;
height:10px;
background-color:blue;
}
If the above is not what you're looking for, maybe this will help you find a solution to your problem:
http://jsfiddle.net/q7wcam7x/7/
HTML:
<div class="container">
<div class="stickyHeader">THIS IS A HEADER</div>
<div class="scrollableContent">SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>
</div>
</div>
CSS:
.container {
width: 200px;
height: 150px;
overflow:hidden;
border: gold solid 2px;
}
.stickyHeader {
height: 20px;
background: white;
}
.scrollableContent {
height: 130px;
overflow: auto;
}

Answer 2

try this:
.fixed{
position:fixed;
left: 0;
right: 0
width:inherit;
height:10px;
background-color:blue;
}