<！DOCTYPE html> 和 <input type= "text" > 的 Flex 布局问题

Question

所需的结果是在一行上放置一个输入字段和一些文本，使文本占据视口中的所有空间，而不会与文本重叠。

Chrome、Safari和FireFox都同意这一点，所以合乎逻辑的结论是，我一直在依赖"；几乎标准模式"；在某种程度上我没有意识到。但是与"；DOCTYPE html"；似乎不合情理。

幸运的是，我可以把它简化为一个简单的例子。用"；DOCTYPE html"；，输入字段与以下文本重叠。没有它，它的行为正如我所期望的那样。

<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>

怎么回事？

Answer 1

由于用户yomisimie解决了它，我将把它放在这里以关闭线程"你有没有试过在所有元素中添加方框大小？或者至少只有交互的(div，input(？*{框大小：边框框；}-yomisimie">

因此，半令人惊讶的是，INPUT元素的边界不计入框大小(就像任何其他元素一样(，除非您指定{box-sizing:bborder-box；}。我本来打算在全球范围内做这件事，但不小心把它放在了BODY中，而不是一个*规则。