不在FireFox中工作：div宽度填充线并在空间不足时跳转到新线

Question

我有两个div：

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

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

小提琴示例：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有边框顶部或填充顶部，它可以解决问题：pull request

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

如果有人愿意解释，我们会很乐意知道它的原因。

Answer 2

这应该做的工作：

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

https://jsfiddle.net/Lecv8oor/