在 FireFox 中不工作：div 宽度填充行并在不够时跳转到新行 space

Question

我有两个 div：

一个向右浮动（这个大小不变）
另一个有宽度自动和隐藏溢出，它使用行中所有剩余的 space 并且当可用的 space 少于最小宽度时，它跳到下面的行，填充它

这是我想要的行为，但它在 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;">

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

Answer 2

这应该可以完成工作：

@media (max-width: 161px) {
    .automagic { display: block; width: 100%; clear: both; }
}

https://jsfiddle.net/Lecv8oor/

在 FireFox 中不工作：div 宽度填充行并在不够时跳转到新行 space

Not working in FireFox: div width to fill line and jump to new line when not enough space

html

css

firefox

width