Div with 100% Width of Screen, But Inside a Parent Div with Fixed Width

setting fixed width with 100% height of the parent

You can use width: calc(100% - 100px) or flex: 1 for the right div.

Percentage values are calculated from the parent element, therefore you need to extract static values from 100% to get the remaining area.

But as you are already using a flex container here, you can just set flex: 1, which is the shorthand for flex-grow: 1, that will allow your container to take all the extra space in the parent container, since no other items are available.

How can I expand a child div to 100% screen width if the container div is smaller?

You can set the width based on the vw (viewport width). You can use that value too using the calc function, to calculate a left-margin for the div. This way you can position it inside the flow, but still sticking out on the left and right side of the centered fixed-width div.

Support is pretty good. vw is supported by all major browsers, including IE9+. The same goes for calc(). If you need to support IE8 or Opera Mini, you're out of luck with this method.

-edit-

As mentioned in the comments, when the content of the page is higher than the screen, this will result in a horizontal scrollbar. You can suppress that scrollbar using body {overflow-x: hidden;}. It would be nice though to solve it in a different way, but a solution using left and rightlike presented in Width:100% without scrollbars doesn't work in this situation.

-edit 2021-

Another work-around for the scrollbars, which may be acceptable or not depending on your situation:

By making the green div a little bit smaller, say 20px, you can keep a bit of space for the scrollbar. Half that reserved width can be added to the margin, to keep the wide div centered:

#wide-div {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);

div {
  min-height: 40px;
  box-sizing: border-box;
}
#container {
  position: relative;
}
#parent {
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

#something {
  border: 2px solid red;
}

#wide-div {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);
  border: 2px solid green;
}

<div id="container">
<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Green

<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
</div>
  <div id="something-else">Other content, which is not behind Green as you can see.</div>
</div>
</div>

How can I set 'absolute' or 'fixed' with width: 100% to its parent div not the window size?

You can't do it with fixed, but you can set the parent div (the black box in your example) to have position: relative; and that will make the absolute positioned child position itself according to the parent div.

Why is this?

Absolute - the element is positioned absolutely to its first positioned parent. -- DZone

What this means is that the absolute positioned element will position itself according to the nearest ancestor with an assigned position, besides static.

I hope this is clear enough, but let me know if it's not.

Set a Fixed div to 100% width of the parent container

You can use margin for .wrap container instead of padding for .wrapper:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

Fixed div get width from parent in 100%

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>