How to Make Div's Percentage Width Relative to Parent Div and Not Viewport

#outer {  min-width: 2000px;   min-height: 1000px;   background: #3e3e3e;   position:relative}
#inner {  left: 1%;   top: 45px;   width: 50%;   height: auto;   position: absolute;   z-index: 1;}
#inner-inner {  background: #efffef;  position: absolute;   height: 400px;   right: 0px;   left: 0px;}

<div id="outer">  <div id="inner">    <div id="inner-inner"></div>  </div></div>

How to make fixed div width of parent div, which itself is defined in percentage?

Use postion: absolute instead of position: fixed.

Absolute positionning applies to the first relative parent.
Fixed applies to the window.

You can then place the div relatively to it's parent in the viewport with top, left, right, and bottom attributes.

Fiddle: https://jsfiddle.net/k0vndvzj/3/

Is there a way to make a child DIV's width wider than the parent DIV using CSS?

Use absolute positioning

.child-div {
    position:absolute;
    left:0;
    right:0;
}

CSS constrain absolute-position div to parent size

1) use box-sizing: border-box in order to avoid calculations about borders

2) set position: relative on .content

.container {  height: 3em;  width: 50%;  border: 1px solid green;}
.content {  box-sizing: border-box;  position: relative;  height: 1em;  width: 100%;  border: 3px dashed blue;}
.content .mask {  position: absolute;  z-index: 99;  right: -3px;  bottom: -3px;  left: -3px;  top: -3px;  border: 2px dotted red;}

<div class="container">    <div class="content"><!-- should be however big the container is-->        <div class = "mask"></div> <!-- should be in front of the entire content content -->    </div></div>