Fixed div get width from parent in 100% - html

Question

I have tried to assign a 100% of the parent to a fixed div but is taking the 100% of the screen.
I prepared the code here
http://codepen.io/rodboc/pen/ZOOEWp
HTML
<div id="wrapper">
<div class="box">
<div class="header">
<p>Header</p>
</div>
<div class="content">
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
</div>
</div>
</div>
CSS
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
padding: 10px;
}
#wrapper .box {
width: 100%;
}
#wrapper .header {
width: inherit;
position: fixed;
background: #2ecc71;
}
#wrapper .content {
width: inherit;
background: #27ae60;
}
if a define the width for the parent in px works, but I can't do that, should be in 100%

Answer 1

It's pretty simple actually, move the header outside the box div.
body, html {
margin: 0;
width: 100%
}
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
padding: 10px;
}
#wrapper .box {
background: lime;
}
#wrapper .header {
width: inherit;
position: fixed;
background: #2ecc71;
}
#wrapper .content {
background: #27ae60;
}
<div id="wrapper">
<div class="header">
<p>Header</p>
</div>
<div class="box">
<div class="content">
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
</div>
</div>
</div>

Answer 2

body, html {
width: 100%
}
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
}
#wrapper .box {
width: 100%;
max-width: 238px;
margin: 10px;
background: lime;
}
#wrapper .header {
width: 100%;
position: fixed;
background: #2ecc71;
max-width: inherit;
}
#wrapper .content {
width: 100%;
background: #27ae60;
}
<div id="wrapper">
<div class="box">
<div class="header">
<p>Header</p>
</div>
<div class="content">
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
</div>
</div>
</div>
Fixed position elements is not relative with its parent anymore.
Based on the documentation :
position:fixed MDN
Fixed Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page. This value always create a new stacking context.
One way to fix this is to the max-width of parent and let the child inherit it.
So in your case it should be the same on the snippet i attached.

Answer 3

This might solve your issue, change the styling of the header class like this:
#wrapper .header {
width: 100%;
position: fixed;
background: #2ecc71;
max-width:calc(100% / 3);
}
Check out if it could do for you:
http://output.jsbin.com/jaxasikose/

Answer 4

Okay here is how you fix it with a clean code:
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
padding: 10px;
}
#wrapper .box {
width: 100%;
position: relative;
}
#wrapper .header {
width: 100%;
position: absolute;
background: #2ecc71;
}
#wrapper .content {
width: 100%;
overflow: auto;
background: #27ae60;
}