Center fixed element horizontally minus column - css

Question

I have a two-column layout and want a fixed element to be centered horizontally in the right column.
How do I accomplish this as a fixed element isn't position relative to it's parent but rather to the document?
Note: the left column's width is known. The right column's width is "full width".
I'm using fixed (and not absolute) because the element has to follow scrolling.
.wrapper {
height: 200px;
display: flex;
background-color: green;}
.column {
width: 300px;
background-color: pink;
}
.content {
flex: 1;
background-color: green;
}
.fixed-element {
position: fixed;
left: 50%;
background-color: orange;
}
<div class='wrapper'>
<div class='fixed-element'>Please center me in green area.</div>
<div class='column'></div>
<div class='content'></div>
</div>

Answer 1

You can use calc to calculate center and transform for the unkown width of fixed element positioning.
Please check if the browser compability for the calc is ok for you, before using it in production.
And here is my solution
body {
margin: 0;
}
.wrapper {
height: 200px;
display: flex;
background-color: green;
}
.column {
width: 200px;
background-color: pink;
}
.content {
flex: 1;
background-color: maroon;
}
.fixed-element {
z-index: 111;
position: fixed;
right: calc(50% - 205px); //can't explain that +5px :)
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
background-color: orange;
}
<div class='wrapper'>
<div class='fixed-element'>Please center me</div>
<div class='column'></div>
<div class='content'></div>
</div>