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

Question

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

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

<header>Header</header>
<div id="container">
  <div id="absolute"></div>
</div>
<footer>Footer</footer>

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.

Answer 1

I added another wrapper that has the overflow: auto; and removed it from the main container

#container {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
}

.subcon {
  overflow: auto;
}

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

<header>Header</header>
<div id="container">
  <div class="subcon">
    <div id="absolute"></div>
  </div>
</div>
<footer>Footer</footer>