CSS резиновая ширина

Есть блок div у которого есть overflow: auto; в нём элемент xmp. При сужении ширины браузера должен включатся скроллинг у div, но не включается, скроллинг включается горизонтальный у самого браузера.

Данный блок находится в элементе section -> main,aside section элементы flex, в section -> header, main, footer

HTML:

<div class="demo">
<xmp data-code="html">
<div class="dye0 border-solid border-radius center pit1 gap1e resize"
style="--gap:0.2em;width:500px;max-width:97%;min-width:130px">
  <div class="dye8 ink1 text-center">элемент</div>
  <div class="dye8 ink1 text-center">элемент</div>
  <div class="dye8 ink1 text-center">элемент</div>
</div></xmp>
<span class="dye6 ink0" align="topleft">HTML</span>
</div>

CSS:

div.demo, div[id^=box_demo] {
  margin: 1em;
  padding: 1em;
  overflow: auto;
  max-width: 100%;
  position: relative;
  border-radius: 0.3em;
  background-color: var(--c3);
  border: 0.3em double var(--c6);
}
div.demo > span, div[id^=box_demo] > span {
  padding: 0.15em;
  font-size: 0.7em;
  position: absolute;
}
div.demo > xmp, div[id^=box_demo] > xmp {margin: 0;}
div.demo > span[align^=top], div[id^=box_demo] > span[align^=top] {top: 0;}
div.demo > span[align$=left], div[id^=box_demo] > span[align$=left] {left: 0;}
div.demo > span[align$=right], div[id^=box_demo] > span[align$=right] {right: 0;}
div.demo > span[align^=bottom], div[id^=box_demo] > span[align^=bottom] {bottom: 0;}

Перепробовал всё. Как сделать чтобы скроллинг был у div, а не у браузера.