div.fixed with 100% width only with css - html

Question

How can I have div.fixed at 100% of the width of its parent .content? ... knowing that all widths will be variable, even .content
more or less what I need is .content with position: relative; div.fixed with the position: absolute; and width: 100%; But fixed at the top if I have a vertical scroll
and if possible without using JavaScript, only with CSS.
I was trying several things but none works, thank you for your time and help
.sidebar {
float: left;
background-color: red;
padding: 20px;
color: #fff;
}
.content {
float: left;
width: 40%;
padding: 20px;
background-color: #d5d2ca;
min-height: 900px;
box-sizing: border-box;
position: relative;
}
.fixed {
background-color: #aaffaa;
padding: 20px;
position: absolute;
box-sizing: border-box;
width: calc(100% - 40px);
}
.content p {
margin-top: 100px;
}
<div style="width: 90%; margin: 0 auto;">
<div class="sidebar">
the sidebar is going to have variable width
</div>
<div class="content">
<div class="fixed">
Fixed
</div>
<p>content</p>
</div>
</div>

Answer 1

100% of .content? That would be
width:calc(40% - 40px);

Answer 2

change that line:
<div style="width: 90%; margin: 0 auto;">
to
<div style="width: 100%; margin: 0 auto;">
also add to the class:
.fixed {
width: 100%;
}
and remove width:40%; from the .content

Answer 3

I am not sure if i understand the problem correctly, but if you want to make the fixed div to have 100% of its parent, then the following should work
.content {
position: relative;
}
.fixed {
width: 100%;
position: absolute;
}

Answer 4

For your question to be solved, must width of .content equal with width of .fixed so, use of:
.fixed {
width: inherit;
//so .fixed get width 40%
}
But,
.fixed have position:fixed, so 40% is relative to the screen's viewport,
and
.content is 40% relative to his parent[div with width:90%,(90% relative to body)].
in here ,we have to do something to measure both elements relative to one element.so,do this:
html,body {
width: 100%;
margin:0;
}
<div style="width:100%; margin:5px 70px;">
of 90% to 100%----^ ^---^-------optional
also, use margin-left:-20px for remove affect padding:20px in .content.
.fixed {
margin-left: -20px;
//more code...
}
Nowو you have both elements have width:40% relative to same element.
Note, Get Full Page to better see result.
* {
box-sizing: border-box;
}
html,body {
width: 100%;
margin:0;
}
.sidebar {
float: left;
background-color: red;
padding: 20px;
color: #fff;
}
.content {
float: left;
width: 40%;
padding: 20px;
background-color: #d5d2ca;
min-height: 900px;
position: relative;
}
.fixed {
background-color: #aaffaa;
padding: 20px;
margin-left: -20px;
position: fixed;
width: inherit;
}
.content p {
margin-top: 100px;
}
<div style="width:100%; margin:5px 70px;">
<div class="sidebar">
the sidebar is going to have variable width
</div>
<div class="content">
<div class="fixed">
Fixed
</div>
<p>content</p>
</div>
</div>