This question isn't really related to academics, it's more of a work-related inquiry that I've simplified into a basic question.
I placed one div inside another expecting the inner div to inherit the width of the outer div. Initially, this is what occurs.
However, when I input a large amount of text into the outer div causing it to exceed the viewport width, disable text wrapping, and enable scrolling, a strange situation unfolds.
The inner div now takes on the width of the viewport rather than the outer div. You can scroll sideways to see that the outer div is actually wider due to the text content, but the inner div remains constrained to the viewport width.
This defies my initial assumption that the inner div would always match the width of the outer div.
https://plnkr.co/edit/XaysEo?p=preview
<body>
<my-app>
loading...
</my-app>
<div>
This is after the angular part.
</div>
<div id="outerDiv" style="background-color:blue;white-space:nowrap;overflow-x:scroll;">
This is a bunch of text. It is here to make the outer box wider than the viewport. Today, Bette and I had lunch at Outback. Outback's steak was good.
<div id="innerDiv" style="background-color:red;">
Just some text to make it appear.
</div>
</div>
<div>
</div>
<div id="outerDivWidth">
Hello?
</div>
<div id="innerDivWidth">
Hello?
</div>
<script>
let od = document.getElementById('outerDiv');
console.log(od);
let ow = od.offsetWidth;
console.log(ow);
let odw = document.getElementById('outerDivWidth')
odw.textContent = ow;
let id = document.getElementById('innerDiv');
let iw = id.offsetWidth;
let idw = document.getElementById('innerDivWidth')
idw.textContent = iw;
</script>
</body>