The desired result is to place an input field and some text on a line, having the text take up all the space it can in the viewport without overlapping the text.
Chrome, Safari and FireFox all agree, so the logical conclusion is that I've been relying on "almost standards mode" in some way I don't realize. But the behavior with "DOCTYPE html" seemingly defies reason.
Fortunately, I could minimize it to a barebones example. With "DOCTYPE html", the input field overlaps the following text. Without it, it behaves as I would expect.
<div style="display: flex; flex-flow: row, nowrap">
<div style="width: 100%">
<!-- "width" here doesn't help or hinder-->
<input type="text" style="width:100%">
</div>
<div>
OK?
</div>
</div>What's going on?
Since user yomisimie solved it, I'll put it here to close off the thread. "Have you tried to add box-sizing to all elements? Or at least only the ones interacting (div, input)? * { box-sizing: border-box; } – yomisimie"
So the semi-surprising thing is that the borders of INPUT elements are not counted in box sizing (just like any other element) unless you specify { box-sizing: border-box; }. I had meant to do it globally but accidentally put it in BODY instead of a * rule.