html - 在 FireFox 中不工作 : div width to fill line and jump to new line when not enough space

Question

我有两个 div:

• 一个向右浮动(这个大小不变)
• 另一个有宽度自动和 overflow hidden ，它使用行中所有剩余的空间，当可用空间少于最小宽度时，它跳到下面的行，填充它

这是我想要的行为，但它在 FireFox 中不起作用，它只是停止调整宽度并开始在恒定大小的 div 上移动。

fiddle 示例:https://jsfiddle.net/qxda20g9/

<style>
.noadjust {
width:330px;
height:40px;
float:right;
background-color:teal;
color:white;
}
.automagic {
min-width: 160px;
overflow: hidden;
width: auto;
padding: 5px;
min-height: 30px;
background-color:lightblue;
}
</style>

<div class="noadjust">constant size</div>
<div class="automagic">fills line or drops to next</div>

Answer 1

我不确定为什么，但是如果容器 div 有 border-top 或 padding-top 它就解决了这个问题:https://jsfiddle.net/nhprvk72/

<div id="contain" style="padding-top:1px;">

如果有人愿意解释，我很想知道这是为什么。