How to get position:absolute child to overflow the parent dimensions when parent overflow is auto?

<header>Header</header>
<div id="container">
    I have an absolute positioned yellow bar here that is wider than the parent box. I'd like the full bar to be visible and not be clipped by the parent dimensions. Is it possible to do that using some combination of CSS properties?

  I'm aware that removing overflow:auto from the parent gives the effect I am asking for but removing that is not an option, unfortunately.
  <div id="absolute"></div>
</div>
<footer>Footer</footer>


#container {
  width: 200px;
  height: 200px;
  background:red;
  overflow: auto;
}

#absolute {
  position: absolute;
  top: 50px;
  left: 0;
  width: 400px;
  height: 20px;
  background: yellow;
}