Looking for some help with a web component I'm creating called my-thing. My struggle lies in getting the scrollbars to work as intended.
I have provided a sample (link to codepen). How can I make the scrollbars appear without modifying the elements marked as "can't change"?
<html>
<body>
<style>
.my-thing {
white-space: pre;
overflow: auto;
border: 1px red solid;
/*width:100%;*/
}
</style>
<br />
<div style="display:flex"> <!-- can't change -->
<div> <!-- can't change -->
<div class="my-thing">
This has NO scrollbars!!
This is a loooooooong and boring piece of text that really doesn't deserve to be read at all.
This is another loooooooong and boring piece of text that really doesn't deserve to be read at all.
</div>
</div>
</div>
<br />
<div class="my-thing">
This auto scrolls correctly.
This is a loooooooong and boring piece of text that really doesn't deserve to be read at all.
This is another loooooooong and boring piece of text that really doesn't deserve to be read at all.
</div>
</body>
</html>
Edit: In addition, please note that adjusting the width of my-thing manually is not allowed. The ideal scenario would involve keeping "width:100%".