Extend Child Div Beyond Container Div

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>

Why do child divs extend beyond their parent div?

The padding: 1em on the container together with the width:100% makes the actual width 100% + 2em.

You should add box-sizing: border-box; to .container to make sure that the width is 100% (example).

How can I extend the width of a child div to go beyond the parent div's width?

I wouldn't do this but it seems to work:

#greendiv {
  width:120%;
  margin-left:-10%;
  background-color: green;
}

See the Fiddle.

Why can't the #greendiv be before the .container or some other wrapper div?

Edit. Turn you thinking upside down (not really, just make a custom container inside mandatory container, here the .yellowdivs are custom containers and the #greendiv is the full width container inside container):

.container {
  width: 100%;//or some amount of pixels and the yellow divs follow that setting
  margin: 0px auto;
}

.yellowdiv {
  width:80%;
  margin-left:10%;
  border: solid 1px;
  background-color: yellow;
}
#greendiv {
  background-color: green;
}

See the Fiddle.

Prevent child div from expanding outside of parent?

You can change your #insideDiv's max-height CSS property from 100% to inherit. So this rule will be like this:

max-height: inherit;

You also might want to add box-sizing:border-box; if you go this route, as that will allow any borders or padding on #insideDiv to behave as (probably) desired.

The cause of this issue is that max-height:100%; looks for the parent's height, not its max-height for how tall it's allowed to be. Thus, you end up with the classic non-deterministic relative height problem. If you give the parent a deterministic height (rather than max-height), 100% can resolve deterministically.

HTML make child div expand beyond parent div (without width: 9999px)

Set the display property of the child elements to inline-block and the white-space property of the parent to nowrap.

#parent{

  background:#000;

  height:100px;

  padding:5px;

  white-space:nowrap;

  width:200px;

}

#parent>div{

  display:inline-block;

  height:100%;

  width:100%;

}

#parent>div:nth-child(odd){background:#f00;}

#parent>div:nth-child(even){background:#0f0;}

<div id="parent"><div></div><div></div><div></div><div></div><div></div></div>

const App = () => {

  return (
    <div style={{ padding: 20, backgroundColor: 'red', position: 'relative' }}>
      <h3>See the following blue background paragraph. I want it to go beyond the padding I set for the parent div</h3>
<div style={{ paddingBottom: 30}}><p style={{overflowX: 'scroll', whiteSpace: 'nowrap', backgroundColor: 'blue', position: 'absolute', left: 0, right: 0, margin: 'auto'}}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>  
        <h3>Think of it this way: I still want it to scroll as needed, but, I want it to completely go across my parent div, surpassing the padding set on it.</h3>
    </div>
  )
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>